【React Hook】- useReducer

useReducer

useReducer 是 React 提供的一种状态管理方式，它类似于 Redux 的 reducer，用于处理复杂的状态逻辑。useReducer 接受两个参数：reducer 函数和初始状态，返回一个状态值和一个 dispatch 函数。

const [state, dispatch] = useReducer(reducer, initialState);

reducer 函数是一个纯函数，它接受当前的状态和动作类型，并返回新的状态。dispatch 函数用于分发动作，它接受一个动作对象，并将其传递给 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();
    } 
}

useReducer 的优点是它可以将状态逻辑集中在一个地方，使得代码更加清晰和可维护。同时，它还可以避免因为直接修改状态而导致的不可预测的行为。

useReducer 的缺点是它比 useState 更加复杂，需要编写更多的代码。同时，它也可能会导致性能问题，因为每次状态更新都会触发组件的重新渲染。

总结：useReducer 是 React 提供的一种状态管理方式，它可以将状态逻辑集中在一个地方，使得代码更加清晰和可维护。同时，它也可以避免因为直接修改状态而导致的不可预测的行为。但是，它比 useState 更加复杂，需要编写更多的代码，并且可能会导致性能问题。

参考：https://zh-hans.reactjs.org/docs/hooks-reference.html#usereducer