在 React Hooks 中从 useState 迁移到 useReducer
React Hooks 是 React 16.8 中最受欢迎的新功能。它使开发人员能够在不编写类的情况下使用状态和其他 React 功能，从而使组件更加简洁和可读。useState 和 useReducer 是两种主要的状态管理机制，本篇文章将重点介绍如何从 useState 迁移到 useReducer。
useState vs useReducer
useState 使我们可以在函数组件中使用本地状态。我们调用它并传递一个初始状态，它返回一个包含当前状态值和一个更新该状态值的函数。例如：
“`
const [count, setCount] = useState(0);
“`
useReducer 提供了更多的控制，可以将复杂的状态逻辑传递给 reducer 函数，它接受当前状态和 action，根据 action 的类型返回一个新的状态。例如：
“`
const initialState = {count: 0};
function reducer(state, action) {
switch (action.type) {
case ‘increment’:
return {count: state.count + 1};
case ‘decrement’:
return {count: state.count – 1};
default:
throw new Error();
}
}
const [state, dispatch] = useReducer(reducer, initialState);
“`
为何使用 useReducer？
使用 useReducer 的好处是，在组件中使用更多的状态时，它更适合处理更复杂的逻辑。尤其是在有多个相关变量需要计算和更新的情况下。
此外，虽然 useState 允许您使用多个用关闭的状态变量，但这会导致代码变得复杂，并且您需要跟踪每个变量的状态。用 useReducer 您可以将所有这些关联事件收集到一个单独的 reducer 函数中，并且得到一个彼此相关的状况集合。
从 useState 迁移到 useReducer
接下来，让我们看看如何将代码从 useState 迁移到 useReducer。
步骤1：定义 reducer
首先定义纯函数，根据当前状态和执行操作进行计算的分派函数。
“`
function reducer(state, action) {
switch (action.type) {
case ‘increment’:
return {count: state.count + 1};
case ‘decrement’:
return {count: state.count – 1};
default:
throw new Error();
}
}
“`
步骤2：用 initialState 替换 useState
接下来在组件顶部设置初始状态和使用 useReducer，代码如下:
“`
const initialState = {count: 0};
const [state, dispatch] = useReducer(reducer, initialState);
“`
步骤3：使用 dispatch 更新状态
最后使用 dispatch 函数而不是 setCount 来更新状态。
“`
// 显示计数
“`
=end=
了解更多有趣的事情：https://blog.ds3783.com/