性能优化API

• useReducer
• 作用：和 useState 的作用类似，用来管理相对复杂的状态数据
• 基础语法：
• 步骤：
1. 定义一个 reducer 函数（根据不同的 action 返回不同的新状态）
2. 在组件中调用 useReducer，并传入 reducer 函数和状态的初始值
3. 事件发生时，通过 dispatch 函数分派一个 action 对象（通知 reducer 要返回哪个新状态并渲染 UI）

• useMemo
• 作用：在组件每次重新渲染的时候缓存计算的结果
• 基础语法：
• 说明：使用 useMemo 做缓存之后可以保证只有 count 依赖项发生变化时才会重新计算

• React.memo
• 作用：允许组件在 Props 没有改变的情况下跳过渲染
• React 组件默认的渲染机制：只要父组件重新渲染子组件就会重新渲染
• 说明：经过 memo 函数包裹生成的缓存组件只有在 props 发生变化的时候才会重新渲染
• 基础语法：
• props 的比较机制
• 机制：在使用 memo 缓存组件之后，React 会对每一个 prop 使用 Object.is 比较新值和老值，返回 true，表示没有变化
• prop 是简单类型
• 例：Object.is(3, 3) → true 没有变化
• prop 是引用类型（对象 / 数组）
• 例：Object.is([], []) → false 有变化，React 只关心引用是否变化
• 使引用稳定的方法：使用 useMemo 缓存

• useCallback
• 作用：在组件多次重新渲染的时候缓存函数
• 说明：使用 useCallback 包裹函数之后，函数可以保证在 App 重新渲染的时候保持引用稳定
• 基础语法：

ref相关API

• React.forwardRef
• 使父组件通过 ref 获取到子组件内部的元素
• 基础语法：

• useImperativeHandle
• 使父组件通过 ref 调用子组件内部的方法
• 基础语法：

Class API类组件

• 类组件基础结构
• 类组件就是通过 JS 中的类来组织组件的代码
• 成员：
1. 通过类属性 state 定义状态数据
2. 通过 setState 方法来修改状态数据
3. 通过 render 来写 UI 模版（JSX 语法一致）
• 基本语法：

• 类组件的生命周期函数
• 概念：组件从创建到销毁的各个阶段自动执行的函数就是生命周期函数
• 常见函数：
1. componentDidMount：组件挂载完毕自动执行——异步数据获取
2. componentWillUnmount：组件卸载时自动执行——清理副作用

• 类组件的组件通信
• 概念：类组件和 Hooks 编写的组件在组件通信的思想上完全一致
• 类型：
1. 父传子：通过 prop 绑定数据
2. 子传父：通过 prop 绑定组件中的函数，子组件调用
3. 兄弟通信：状态提升，通过父组件做桥接

Zustand

• 快速上手
• 创建 store（状态数据 和 操作方法）—绑定到组件—> component（消费数据和方法）
• 安装：pnpm add zustand
• 基本语法：
• 官网：
Zustand
🐻 Bear necessities for state management in React

https://zustand-demo.pmnd.rs/

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

• 切片模式
• 场景：当单个 store 比较大的时候，可以采用切片模式进行模块拆分组合，类似于模块化
• 步骤：
1. 拆分子模块，再组合起来
2. 组件使用