React学习day08-useReducer、useMemo、memo、useCallback、forwardRef、useInperativeHandle

15、useReducer

1）作用：用来管理相对复杂的状态数据，类似于useState

2）使用步骤（传递一般的参数）（在APP.js中）：

①定义一个reducer函数，在函数中通过switch语句，实现不同action对应不同状态

②在组件中调用useReducer，并传入reducer函数和state的初始值

查看state初始值

③事件发生时，通过dispatch传递action对象

④效果

⑤传递自定义参数，实现更新

在reducer函数中新增

（这里是直接返回传的值）

在触发dispatch传参时，传递payload

效果：

16、useMemo（在计算性能消耗很大时使用）

（1）作用：在组件每次渲染的时候缓存计算结果

（2）语法：useMemo（（）=>{},[依赖项]）（只有依赖项变化时，执行函数）

（3）示例：

1）准备代码（以返回num1平方为例）

2）不使用useMemo，与变化无关的选项也会引起函数的执行

3）使用useMemo后

17、memo

（1）作用：允许组件在Props没有改变的情况下跳过渲染

（2）语法：memo(子组件)

（3）应用场景：在React组件的默认渲染机制中只要父组件重新渲染子组件也会重新渲染时使用。

（4）示例（以简单prop类型为例）

修改后（职业props发生变化时才会重新渲染）：

（5）React.memo-props的比较机制（在使用memo缓存组件之后，React会对每一个prop使用Object.is比较新值和老值，返回true，表示没有变化，false，有变化）

1）prop是简单类型

有变化时

传入一个常量

2）prop是引用类型，以数组为例，即使新值和老值均是空数组，也会显示有变化（因为引用实际上是形成新的数组引用）（可以使用useMemo缓存解决）

即使每次传入的是相同的数组，仍会触发函数

解决方法：使用useMemo，利用空依赖，仅在组件渲染时执行一次

18、useCallback

（1）作用：在组件重新渲染时缓存函数（使用useCallback包裹函数之后，函数可以保证在App重新渲染时保持稳定）

（2）语法：useCallback（函数）

未使用（即使使用memo缓存了）

使用后

19、React的forwardRef（在父组件通过ref拿到子组件的元素）

（1）作用：使用ref暴露DOM节点给父节点

（2）语法：在父组件中使用useRef（），通过ref传参给子组件；在子组件中使用forwardRef将子组件的内容包裹起来，并设置参数

（3）示例

初始代码：

1）在父组件中使用useRef（），通过ref传参给子组件

2）在子组件中使用forwardRef将子组件的内容包裹起来，并设置参数

20、useInperativeHandle

（1）作用：通过ref保留子组件的方法

（2）语法：

1）父组件内：使用useRef声明，并通过ref传参，然后通过父组件的ref获取子组件的方法，绑定点击事件

2）子组件内：通过useRef与组件绑定，提供方法，暴露方法

（3）适用场景：父组件需要使用子组件的方法时（通过ref调用子组件的方法）

（4）示例

初始代码：

在子组件内：

通过useRef与组件绑定，提供focus方法，暴露方法

在父组件内

通过父组件的ref获取子组件的方法，绑定点击事件