【React学习打卡第五天】

一、useReducer

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

完成案例：

1.基础用法

1. 定义一个reducer函数（根据不同的action返回不同的新状态）
2. 在组件中调用useReducer，并传入reducer函数和状态的初始值
3. 事件发生时，通过dispatch函数分派一个action对象（通知reducer要返回哪个新状态并渲染UI）
   
   

2.分派action时传参

二、useMemo

作用：在组件每次重新渲染的时候缓存计算的结果

1.基础语法

说明：使用useMemo做缓存之后可以保证只有count1依赖项发生变化时才会重新计算

三、React.memo

作用：允许组件在Props没有改变的情况下跳过渲染;React组件默认的渲染机制：只要父组件重新渲染子组件就会重新渲染

React组件默认的渲染机制：只要父组件重新渲染子组件就会重新渲染
思考：如果Son组件本身并不需要做渲染更新，是不是存在浪费？

1.基础语法

说明：经过memo函数包裹生成的缓存组件只有在props发生变化的时候才会重新渲染

2.React.memo - props的比较机制

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

prop是简单类型
Object.is(3, 3) => true 没有变化
prop是引用类型（对象 / 数组）
Object([], []) => false 有变化，React只关心引用是否变化
传递简单props:

传递复杂引用类型props:

四、useCallback

作用：在组件多次重新渲染的时候缓存函数

基础语法

说明：使用useCallback包裹函数之后，函数可以保证在App重新渲染的时候保持引用稳定

五、React.forwardRef

使用ref暴露DOM节点给父组件

六、useInperativeHandle

通过ref暴露子组件中的方法

七、类组件编写

1.基础结构

类组件就是通过JS中的类来组织组件的代码

通过类属性state定义状态数据
通过setState方法来修改状态数据 3.
通过render来写UI模版（JSX语法一致）

2.生命周期函数

概念：组件从创建到销毁的各个阶段自动执行的函数就是生命周期函数

componentDidMount：组件挂载完毕自动执行 - 异步数据获取
componentWillUnmount: 组件卸载时自动执行 - 清理副作用

3.组件通信

概念：类组件和Hooks编写的组件在组件通信的思想上完全一致

父传子：通过prop绑定数据

子传父：通过prop绑定父组件中的函数，子组件调用

兄弟通信：状态提升，通过父组件做桥接

八、zustand

极简的状态管理工具

官网：https://zustand-demo.pmnd.rs/

1.快速上手

2.异步支持

对于异步的支持不需要特殊的操作，直接在函数中编写异步逻辑，最后只需要调用set方法传入新状态即可

3.切片模式

场景：当单个store比较大的时候，可以采用 切片模式 进行模块拆分组合，类似于模块化