一、原生方案

1.useState(局部状态)

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

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>+</button>
      <span>{count}</span>
    </div>
  );
}

场景：单个组件的按钮计数器

2.useReducer(复杂状态)

const initialState = { count: 0 };

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, initialState);
  
  return (
    <div>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <span>{state.count}</span>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </div>
  );
}

场景：带多种操作的计数器逻辑

3. Context API (跨组件共享)

// 创建Context
const ThemeContext = createContext('light');

// 提供者组件
function App() {
  const [theme, setTheme] = useState('light');
  
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

// 消费者组件
function Toolbar() {
  const { theme, setTheme } = useContext(ThemeContext);
  
  return (
    <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>
      当前主题: {theme}
    </button>
  );
}

场景：主题切换全局状态

二、第三方库

1. Redux (可预测状态容器)

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

const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT': return state + 1;
    case 'DECREMENT': return state - 1;
    default: return state;
  }
};

const store = createStore(counterReducer);

// Component
import { useSelector, useDispatch } from 'react-redux';

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

  return (
    <div>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
      <span>{count}</span>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
    </div>
  );
}

场景：跨多组件共享计数器状态

2. MobX (响应式状态)

// store.js
import { makeAutoObservable } from 'mobx';

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() { this.count++; }
  decrement() { this.count--; }
}

const counterStore = new CounterStore();

// Component
import { observer } from 'mobx-react-lite';

const Counter = observer(() => (
  <div>
    <button onClick={() => counterStore.decrement()}>-</button>
    <span>{counterStore.count}</span>
    <button onClick={() => counterStore.increment()}>+</button>
  </div>
));

场景：需要自动跟踪依赖的复杂业务逻辑

3. Zustand (轻量级状态)

// store.js
import create from 'zustand';

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

// Component
function Counter() {
  const { count, increment, decrement } = useCounterStore();
  
  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
}

场景：快速实现全局计数器，无需复杂配置

4. Jotai (原子化状态)

// store.js
import { atom, useAtom } from 'jotai';

const countAtom = atom(0);

// Component
function Counter() {
  const [count, setCount] = useAtom(countAtom);
  
  return (
    <div>
      <button onClick={() => setCount(c => c - 1)}>-</button>
      <span>{count}</span>
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </div>
  );
}

场景：需要组合多个独立状态的高效更新

5. React Query (远程状态)

import { useQuery } from 'react-query';

function UserProfile({ userId }) {
  const { data, isLoading, error } = useQuery(
    ['user', userId],
    () => fetch(`/api/users/${userId}`).then(res => res.json())
  );

  if (isLoading) return 'Loading...';
  if (error) return 'Error!';

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.email}</p>
    </div>
  );
}

场景：管理用户数据请求与自动缓存

三、选型决策树

1. 数据范围
2. 组件内部 → useState/useReducer
3. 跨组件共享 → Context/Redux/Zustand
4. 服务端状态 → React Query
5. 更新频率
6. 低频更新 → Context API
7. 高频更新 → Jotai/Zustand
8. 项目规模
9. 小型项目 → Zustand + React Query
10. 大型项目 → Redux Toolkit + TypeScript

四、性能优化

1. Context 分层：为不同数据创建独立 Context
2. 状态分片：使用 Redux Toolkit 或 Zustand 的切片功能
3. 记忆化：React.memo + useMemo/useCallback 减少重渲染
4. 原子化更新：Jotai/Recoil 实现精准更新