hook函数——useReducer

1.useReducer定义

const [state, dispatch] = useReducer(reducer, initialArg, init?)

reducer：用于更新 state 的纯函数。参数为 state 和 action，返回值是更新后的 state。state 与 action 可以是任意合法值。
initialArg：用于初始化 state 的任意值。初始值的计算逻辑取决于接下来的 init 参数。
可选参数 init：用于计算初始值的函数。如果存在，使用 init(initialArg) 的执行结果作为初始值，否则使用 initialArg。

2.useReducer用法

这里我使用ts的语法，根据定义可以知道，我们首先需要声明一个reducer函数，函数中包含两个参数，一个是数据的状态state，也就是初始值，另一个是对数据需要进行的操作，在函数体里面通过switch case语句指出不同的type需要进行的不同操作，这里实现的是一个计数器原理

type Action = { type: 'add' } | { type: 'del' };function reducer(state: number, action: Action) {switch (action.type) {case 'add':return state + 1;case 'del':return state - 1;default:return state;}
}

在组件中初始化useReducer，给按钮分别添加响应事件，通过dispatch分发点击的type，就可以执行reducer函数里对应的操作了

function App() {const [state, dispatch] = useReducer(reducer, 0);const handleAdd = () => {dispatch({ type: 'add' });};const handleDel = () => {dispatch({ type: 'del' });};return (<div className="App"><h1>Count: {state}</h1><button onClick={handleAdd}>Add</button><button onClick={handleDel}>Del</button></div>);
}