React Hook丨useState与useReducer的组合拳

在 React 的世界里，Hooks 就像是一把瑞士军刀，为我们提供了丰富的工具来构建交互式 UI。其中，useState 和 useReducer 堪称两大重量级选手，它们携手 TypeScript，能将状态管理提升到一个全新的境界。

useState：状态管理的基石

useState 是一个基础的 Hook，用于管理组件的状态。它接受一个初始值作为参数，并返回一个数组，其中包含两个元素：当前状态和一个更新状态的函数。

const [count, setCount] = useState(0);

useReducer：状态管理的进阶利器

useReducer 则是 useState 的进阶版，它允许我们使用 reducer 函数来管理状态。reducer 函数接收当前状态和一个 action，并返回一个新的状态。

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    default:
      return state;
  }
};

const [count, dispatch] = useReducer(reducer, 0);

useState 与 useReducer 的强强联合

useState 和 useReducer 可以完美地组合使用，为我们提供更加灵活的状态管理方式。例如，我们可以使用 useState 来管理简单的状态，如组件的可见性或输入字段的值，而使用 useReducer 来管理更复杂的状态，如表单数据或购物车数据。

const [visible, setVisible] = useState(false);
const [formData, dispatchFormData] = useReducer(formDataReducer, initialFormData);

打造一个简易状态管理器

将 useState 和 useReducer 的威力发挥到极致，我们甚至可以创建一个简易的状态管理器。这个状态管理器可以跨组件共享状态，并提供一些常用的操作方法，如获取状态、更新状态和重置状态。

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

  const getState = () => state;

  const updateState = (action) => dispatch(action);

  const resetState = () => dispatch({ type: 'reset' });

  return {
    state,
    getState,
    updateState,
    resetState,
  };
};

使用这个状态管理器，我们可以在组件中轻松地共享和管理状态。

const App = () => {
  const myState = useMyState();

  const handleButtonClick = () => {
    myState.updateState({ type: 'increment' });
  };

  return (
    <div>
      <h1>Count: {myState.getState().count}</h1>
      <button onClick={handleButtonClick}>+</button>
    </div>
  );
};

结语

useState 和 useReducer 是 React Hook 中的两颗璀璨明珠，它们与 TypeScript 的结合，让状态管理变得更加简单高效。无论是构建一个简单的状态管理器，还是管理复杂的表单数据，它们都能轻松应对。