React Hooks函数useReducer使用

useReducer 是 React 中的一个 Hook，用于管理组件内部的状态。与 useState 不同，它更适用于那些具有复杂状态逻辑的组件，可以将状态的更新逻辑封装在 reducer 函数中，从而提供更清晰和可维护的代码。

useReducer 的基本思想是将组件的状态和状态更新逻辑封装在一起，类似于 Redux 中的 reducer。它接收两个参数：一个是 reducer 函数，另一个是初始状态。Reducer 函数接收当前状态和 action 作为参数，返回新的状态。

使用 useReducer 的好处之一是能够处理复杂的状态逻辑，例如需要根据先前状态计算新状态、多个状态之间有依赖关系等情况。此外，useReducer 也适合在多个子组件之间共享状态，因为可以将状态逻辑提升到共享的父组件中。

import React, { useReducer } from 'react';

// 定义 reducer 函数
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

function Counter() {
  // 初始化状态和 dispatch 函数
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
}

export default Counter;

以上示例就是 我们通过 useReducer 创建了一个状态和一个 dispatch 函数。dispatch 函数可以根据传入的 action 类型来触发状态的更新。reducer 函数定义了状态更新的逻辑，根据不同的 action 类型返回不同的状态。