(1)useState的使用

react hooks实例演示
设置count的值和name的值;
上边的情况会发生,name的值设置不进去,这注意:如果是对象或者数组等类型,必须要返回一个新的数组或者是对象才是可以的;

初始值是对象
react hooks实例演示

初始值是数组
react hooks实例演示


(2)useEffect的使用

react hooks实例演示
useEffect的第二个参数

第二个参数不写,只要dom变化都会进行监听,都会触发。
如果是【】,只会触发一次。
也可以专门去监听某一个值,比如上面的count, count的值变化,effect 就会执行;
react hooks实例演示
如果要想要清除副作用,则可以在effect里面返回的回调函数里面进行处理。(该回调函数在组件销毁的时候执行)


(3)useRef的使用

useRef的作用

  1. 存取变量
  2. 获取dom

react hooks实例演示
通过.current.value 获取元素的dom值;

常用操作,不修改DOM 更新变量值
react hooks实例演示


(4)useContext的使用

react hooks实例演示

count的值会从父组件传递给子组件;

如果将父子组件拆开成不同的文件演示 --------》》》

三方组件(引入父组件+子组件)
react hooks实例演示
创建父组件
react hooks实例演示

创建子组件
react hooks实例演示


(4)useMemo的使用

说明
react hooks实例演示

状态不更新演示
react hooks实例演示

react hooks实例演示
需要更新的话,第二个参数,去掉就可以;

如果有多个状态,但是只需要根据某个状态进行改变;
react hooks实例演示
上图所示,只根据count去改变状态,num一直在缓存中。只有count的值发生改变,两个值才都会变化;

父子组件拆分成文件演示

父组件传值
react hooks实例演示
子组件控制要不要更新
react hooks实例演示
第二个参数是空数组,表示只执行一次。如果是传递count,表示只根据count的值进行监听;


(5)useCallBack的使用

useCallBack的作用
react hooks实例演示

效果展示
react hooks实例演示
react hooks实例演示
只根据count去监控
react hooks实例演示


(6)useImpriveHandle的使用

react hooks实例演示

forwardRef的作用:
react hooks实例演示

使用forwardRef (当有多个ref的时候,需要获取,起作用);
作用:父组件获取子组件的某个元素

useImpriveHandle的结合使用
react hooks实例演示
作用:暴露给父组件自定义的属性或者方法;
react hooks实例演示

也可以监控子组件某一属性变化的时候,再把值给到父组件;


(7)useLayoutEffect的使用

react hooks实例演示

关于执行顺序
react hooks实例演示

useLayoutEffect总是在useEffect前执行;


(8)自定义Hook的使用

react hooks实例演示
自定义hook实例
react hooks实例演示


(9)useReducer的使用

react hooks实例演示
react hooks实例演示
react hooks实例演示

useReduce + useContext + createContxt 模拟 redux

react hooks实例演示

外部三方组件(引入reduce和组件)
react hooks实例演示
子组件1
react hooks实例演示
子组件2
react hooks实例演示

Reducer的配置
react hooks实例演示
react hooks实例演示

相关文章: