react hooks实例演示

（1）useState的使用

设置count的值和name的值；
上边的情况会发生，name的值设置不进去，这注意：如果是对象或者数组等类型，必须要返回一个新的数组或者是对象才是可以的；

初始值是对象

初始值是数组

（2）useEffect的使用

useEffect的第二个参数

第二个参数不写，只要dom变化都会进行监听，都会触发。
如果是【】，只会触发一次。
也可以专门去监听某一个值，比如上面的count, count的值变化，effect 就会执行；

如果要想要清除副作用，则可以在effect里面返回的回调函数里面进行处理。（该回调函数在组件销毁的时候执行）

（3）useRef的使用

useRef的作用

存取变量
获取dom

通过.current.value 获取元素的dom值；

常用操作，不修改DOM 更新变量值

（4）useContext的使用

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

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

三方组件（引入父组件+子组件）

创建父组件

创建子组件

（4）useMemo的使用

说明

状态不更新演示

需要更新的话，第二个参数，去掉就可以；

如果有多个状态，但是只需要根据某个状态进行改变；

上图所示，只根据count去改变状态，num一直在缓存中。只有count的值发生改变，两个值才都会变化；

父子组件拆分成文件演示：

父组件传值

子组件控制要不要更新

第二个参数是空数组，表示只执行一次。如果是传递count,表示只根据count的值进行监听；

（5）useCallBack的使用

useCallBack的作用

效果展示

只根据count去监控

（6）useImpriveHandle的使用

forwardRef的作用：

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

useImpriveHandle的结合使用

作用：暴露给父组件自定义的属性或者方法；

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

（7）useLayoutEffect的使用

关于执行顺序

useLayoutEffect总是在useEffect前执行；

（8）自定义Hook的使用

自定义hook实例

（9）useReducer的使用

useReduce + useContext + createContxt 模拟 redux

外部三方组件（引入reduce和组件）

子组件1

子组件2

Reducer的配置