告别useState！用useReducer打造更优雅的React状态管理

归于尽
203 阅读5分钟

在React开发中，状态管理一直是个绕不开的话题。当你还在为复杂的组件状态焦头烂额时，或许该考虑升级你的武器库了——useReducer正是那个被低估的状态管理利器。

从 useState 到 useReducer

先看一个简单的计数器组件，这是用useState实现的版本：

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

  return (
    <>
      Count: {count}
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </>
  );
}

这个实现很直观，但当状态逻辑变得复杂时，就会暴露出问题。比如增加一个需求：同时维护计数器的值和它的平方值。这时useState的实现就会变得繁琐：

function Counter() {
  const [count, setCount] = useState(0);
  const [square, setSquare] = useState(0);

  const increment = () => {
    setCount(prev => {
      const next = prev + 1;
      setSquare(next * next); // 副作用：更新另一个状态
      return next;
    });
  };

  return (
    <>
      Count: {count}
      Square: {square}
      <button onClick={increment}>+</button>
    </>
  );
}

这里出现了几个问题：

  1. 状态更新逻辑分散：更新count的同时需要更新square，逻辑分散在多个地方
  2. 副作用风险：一个状态的更新依赖于另一个状态，容易产生竞态条件
  3. 可维护性差：当状态关系变得复杂时，代码会变得难以理解和维护

这时候，useReducer就派上用场了。它把状态更新逻辑集中到一个地方，让状态变化变得可预测。

理解 useReducer 的核心概念

useReducer是 React 提供的一个钩子，用于管理复杂的状态逻辑。它的基本用法是：

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

其中：

  • reducer是一个纯函数，负责处理状态更新逻辑
  • initialState是初始状态
  • state是当前状态
  • dispatch是一个函数，用于触发状态更新

reducer必须是一个纯函数，这是React状态可预测性的基石。纯函数意味着：

  1. 相同的输入必定得到相同的输出
  2. 不产生副作用（不修改外部状态、不进行API调用等）
  3. 不修改输入参数（state）

让我们用useReducer重写上面的计数器：

const initialState = {
  count: 0,
  square: 0
};

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

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

  return (
    <>
      Count: {state.count}
      Square: {state.square}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

可以看到，所有的状态更新逻辑都被集中到了reducer函数中。这样做的好处是：

  1. 状态更新逻辑集中：所有的状态变化都在一个地方处理，便于维护和理解
  2. 纯函数保证可预测性：reducer是一个纯函数，相同的输入永远会得到相同的输出
  3. 更容易调试：所有的状态变化都通过dispatch触发，可以方便地添加日志记录

多状态管理

当应用变得复杂时，可能会有多个相关的状态需要管理。这时候useReducer的优势就更加明显了。

看一个更复杂的例子：一个包含用户登录状态、主题切换和计数器的应用。

const initialState = {
  count: 0,
  isLoggedIn: false,
  theme: 'light'
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    case 'decrement':
      return { ...state, count: state.count - 1 };
    case 'login':
      return { ...state, isLoggedIn: true };
    case 'logout':
      return { ...state, isLoggedIn: false };
    case 'toggleTheme':
      return { ...state, theme: state.theme === 'light' ? 'dark' : 'light' };
    default:
      return state;
  }
};

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

  return (
    <div className={`app ${state.theme}`}>
      <h1>Counter: {state.count}</h1>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      
      <div>
        {state.isLoggedIn ? (
          <button onClick={() => dispatch({ type: 'logout' })}>Logout</button>
        ) : (
          <button onClick={() => dispatch({ type: 'login' })}>Login</button>
        )}
      </div>
      
      <div>
        <button onClick={() => dispatch({ type: 'toggleTheme' })}>
          Toggle Theme ({state.theme})
        </button>
      </div>
    </div>
  );
}

在这个例子中，我们用一个reducer函数管理了三个不同的状态。所有的状态更新逻辑都集中在一个地方，而且每个状态的变化都有明确的类型标识。

这种模式特别适合复杂的状态管理场景，比如表单处理、购物车功能等。

useReducer 与 useContext 结合：全局状态管理

当应用规模变大时，状态可能需要在多个组件层级之间共享。这时候可以将useReducer与useContext结合使用，实现高效的全局状态管理。

下面是一个简单的实现：

// 创建一个Context
const AppContext = createContext();

// 定义reducer
const initialState = {
  count: 0,
  theme: 'light'
};

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

// 创建Provider组件
function AppProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);
  const value = { state, dispatch };

  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
}

// 在组件中使用
function Header() {
  const { state, dispatch } = useContext(AppContext);

  return (
    <header className={state.theme}>
      <h1>Counter: {state.count}</h1>
      <button onClick={() => dispatch({ type: 'toggleTheme' })}>
        Toggle Theme
      </button>
    </header>
  );
}

function Main() {
  const { dispatch } = useContext(AppContext);

  return (
    <main>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </main>
  );
}

// 在App中使用Provider
function App() {
  return (
    <AppProvider>
      <div className="app">
        <Header />
        <Main />
      </div>
    </AppProvider>
  );
}

这种组合使用的方式有几个明显的优势：

  1. 避免了 props drilling：不需要层层传递 props，任何层级的组件都可以直接获取全局状态
  2. 状态更新逻辑集中：所有的状态变化都由 reducer 处理，便于维护
  3. 更好的可测试性：reducer 是纯函数，可以很方便地编写单元测试

什么时候该使用 useReducer？

虽然useReducer很强大，但并不意味着它适用于所有场景。根据我的经验，以下情况适合考虑使用useReducer：

  1. 复杂的状态逻辑：当状态更新逻辑复杂，涉及多个子状态或条件判断时
  2. 多个相关状态：当多个状态相互依赖，更新一个状态会影响其他状态时
  3. 深层级组件通信：当需要在多个层级的组件之间共享状态时
  4. 需要可预测的状态变化：当你希望状态变化变得可预测，便于调试和维护时

而对于简单的状态管理，比如单个数值或布尔值的变化，使用useState仍然是更简单直接的选择。

总结

useReducer是React提供的一个强大但常被忽视的工具。它既不像useState那样基础，也不像Redux那样重量级，而是在两者之间找到了完美的平衡点。当你下次面对复杂的状态管理需求时，不妨给useReducer一个机会，它可能会成为你React工具箱中最趁手的利器之一。

avatar
文章
阅读
粉丝