react如何状态管理
React 状态管理方法
内置状态管理（useState/useReducer）
React 提供了 useState 和 useReducer 作为基础状态管理工具。useState 适用于简单状态，而 useReducer 更适合复杂状态逻辑。
const [count, setCount] = useState(0);
const [state, dispatch] = useReducer(reducer, initialState);Context API
Context API 允许跨组件共享状态，无需逐层传递 props。适合应用中多个组件需要访问同一状态的场景。
const ThemeContext = createContext(defaultValue);
<ThemeContext.Provider value={currentValue}>
<ChildComponent />
</ThemeContext.Provider>第三方状态库（Redux）
Redux 是流行的状态管理库，提供可预测的状态容器。适用于大型应用或需要严格状态管理的场景。
const store = createStore(reducer);
<Provider store={store}>
<App />
</Provider>MobX
MobX 采用响应式编程模型，自动跟踪状态变化并更新相关组件。适合偏好简单 API 和自动化的开发者。
class Store {
@observable count = 0;
@action increment() { this.count++ }
}
const store = new Store();Zustand
Zustand 是轻量级状态管理方案，结合了 Redux 和 Context API 的优点。适合需要简单但强大解决方案的项目。
const useStore = create(set => ({
bears: 0,
increase: () => set(state => ({ bears: state.bears + 1 })),
}));Recoil
Recoil 由 Facebook 开发，提供原子化状态管理和衍生状态计算。适合需要细粒度状态控制的复杂应用。
const textState = atom({
key: 'textState',
default: '',
});
const [text, setText] = useRecoilState(textState);Jotai
Jotai 是另一种原子状态管理库，API 更简洁。适合追求轻量化和简单性的项目。
const countAtom = atom(0);
const [count, setCount] = useAtom(countAtom);SWR/React Query
专注于数据获取和缓存的状态管理库。适合需要处理服务器状态和缓存的应用程序。
const { data, error } = useSWR('/api/data', fetcher);
const { data } = useQuery('todos', fetchTodos);选择建议
- 小型应用：内置状态或 Context API
- 中型应用：Zustand 或 Jotai
- 大型复杂应用：Redux 或 Recoil
- 数据获取场景：SWR 或 React Query
所有方案都支持 TypeScript，选择时应考虑团队熟悉度和项目规模。现代趋势倾向于更轻量级的解决方案如 Zustand 和 Jotai。
