useReducer

用于管理和处理复杂的状态逻辑。

在 React 源码中，useState 是由 useReducer 实现。

index.tsx

import React, { useReducer } from 'react';

function reducer(state,action){
  switch(action){
    case 'add':
        return state + 1;
    case 'sub':
        return state - 1;
    case 'mul':
        return state * 2;
    default:
        return state;
  }
}

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

  return <div>
    <div>{count}</div>
    <button onClick={() => {dispatch('add')}} >add</button>
    <button onClick={() => {dispatch('sub')}} >sub</button>
    <button onClick={() => {dispatch('mul')}} >mul</button>
  </div>;
}

export default MyApp;

useReducer 和 useContext 配合可以在一些简单场景下实现全局数据管理，从而替代使用 Redux 进行状态管理。