一、定义
它允许你向组件里面添加一个reducer
const [state, dispatch] = useReducer(reducer, initialArg, init?)参数
reducer：用于更新 state 的纯函数。参数为 state 和 action，返回值是更新后的 state
initialArg：用于初始化state的任意值。初始值的计算逻辑取决于接下来的init参数
init：用于计算初始值的函数。如果存在，使用 init(initialArg) 的执行结果作为初始值，否则使用 initialArg。
返回值
返回一个由两个值组成的数组
当前的state：初次渲染时，它是init(initialArg)或initialArg
dispatch函数：用于更新state并触发组件的重新渲染。
特点：
- 这个函数没有返回值
- 它是为了下一次渲染而更新state，调用该函数后读取state只能获取到调用前的值
注：
1、React 会批量更新 state。state 会在 所有事件函数执行完毕 并且已经调用过它的 set 函数后进行更新，这可以防止在一个事件中多次进行重新渲染。
2、如果在访问 DOM 等极少数情况下需要强制 React 提前更新，可以使用 flushSync。
二、用法
1、向组件添加 reducer
在组件顶层作用域创建一个用于管理状态的reducer
import { useReducer } from 'react';
function reducer(state, action) {
// ...
}
function MyComponent() {
const [state, dispatch] = useReducer(reducer, { age: 42 });为了更新内容，需调用dispatch函数：
dispatch({ type: 'incremented_age' });React会把当前的state和action（这里指：{ type: 'incremented_age' }）一起作为参数传给reducer函数，然后reducer函数计算并返回新的state，最后React保存新的state，并使用它渲染组件和更新UI。
2、实现reducer函数
1、往函数体中添加计算并返回新的state的逻辑。
一般写法：使用switch语句通过匹配case条件来计算并返回相应的state
2、dispatch（action）中action可以是任意类型，但他需要携带计算新的state所必须的属性
3、action中的属性（例如上面的type属性）依赖于组件的实际情况。即使它会导致数据的多次更新，每个 action 都只描述一次交互
举个例子：
假设有一个购物车组件，用户可以添加商品。你可能会定义以下 actions：
- ADD_ITEM：表示用户添加了一件商品。
- REMOVE_ITEM：表示用户移除了一件商品。
无论添加商品的过程可能涉及多个状态更新（比如更新商品列表、计算总价等），你仍然只会发出一个 ADD_ITEM 的 action。这个 action 清晰地表示了用户的一个操作，而具体的状态更新逻辑则由 reducer 处理。
4、在reducer内部不能修改它，它是只读的，正确的做法是返回新的对象
function reducer(state, action) {
switch (action.type) {
case 'incremented_age': {
// 🚩 不要像下面这样修改一个对象类型的 state：
state.age = state.age + 1;
return state;
// ✅ 正确的做法是返回新的对象
return {
...state,
age: state.age + 1
};
}3、避免重复创建初始值
React会保存state的初始值并在下一次渲染时忽略它
类型一：把计算初始值的函数的返回值作为初始值
function createInitialState(username) {
// ...
}
function TodoList({ username }) {
const [state, dispatch] = useReducer(reducer, createInitialState(username));虽然 createInitialState(username) 的返回值只用于初次渲染，但是在每一次渲染的时候都会被调用。如果它创建了比较大的数组或者执行了昂贵的计算就会浪费性能。
类型二：把计算初始值的函数作为第三个参数（更优）
function createInitialState(username) {
// ...
}
function TodoList({ username }) {
const [state, dispatch] = useReducer(reducer, username, createInitialState);需要注意的是传入的参数是 createInitialState 这个 函数自身，而不是执行 createInitialState() 后的返回值。这样传参就可以保证初始化函数不会再次运行。
