8. React 状态管理方案选择

React 状态管理方案选择

在 React 开发中，状态管理 是指管理 组件的状态（state），以确保 数据 能够在 组件间流动 并 保持同步。状态管理的需求 随着应用的复杂性增加 而 变得重要。

React 提供了 多种 状态管理方案，包括 内置 的 状态管理工具（如 useState 和 useReducer），以及 第三方 的 状态管理库（如 Redux 和 Zustand）。

1 React 的内置状态管理

1.1 useState

用于管理 组件内部 的 简单状态，适合管理 独立的、短期的 状态。

import React, { useState } from 'react';

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

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

export default Counter;

1.2 useReducer

用于管理 复杂状态逻辑，尤其是涉及 多个子状态 或 复杂操作 的情况，类似于 Redux 的 reducer 概念。

import React, { useReducer } from 'react';

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();
  }
}

function Counter() {
  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;

2 React Context

用于在 组件树 中 共享数据，而无需通过 props 一层一层地传递，适合管理 全局状态，如 主题、用户信息、语言设置 等

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function ThemeToggle() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Toggle Theme
    </button>
  );
}

function App() {
  return (
    <ThemeProvider>
      <ThemeToggle />
    </ThemeProvider>
  );
}

export default App;

3 第三方状态管理工具

3.1 Redux

适合管理 复杂 全局状态，提供 预测性 状态管理，使用 单一的 全局状态树，配合 action 和 reducer。

// store.js
import { createStore } from 'redux';

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(counterReducer);
export default store;

// App.js
import React from 'react';
import { Provider, useSelector, useDispatch } from 'react-redux';
import store from './store';

function Counter() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;

3.2 Zustand

轻量级 状态管理工具，适合 小型项目 或需要 简单状态管理 的场景。

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

function Counter() {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

3.3 Recoil

提供 基于原子 的 状态管理模型，适合需要 拆分状态 的 复杂项目。

4 状态管理方案的选择