前端状态管理对比：如何选择合适的方案

现状与痛点

状态管理常被误认为是为了增加复杂度而引入的负担。很多开发者在遇到组件间数据传递困难时，第一反应是寻找一个库，却忽略了是否真的需要。如果应用规模较小，强行引入重型框架反而会带来维护成本。

良好的状态管理能让数据流转可预测，便于调试和测试，同时优化渲染性能。但在选型前，我们需要审视当前代码中是否存在以下问题：

状态分散在各个组件中，难以统一管理
深层嵌套导致 Props Drilling（属性透传）严重
状态变化不可控，调试链路模糊
不必要的重渲染影响性能

反面教材：原生 Hooks 的局限

在没有状态管理库的情况下，我们通常依赖 useState 和 useEffect。对于简单场景这很有效，但随着业务复杂化，代码会变得难以维护。

// App.js
import React, { useState, useEffect } from 'react';

function App() {
  const [user, setUser] = useState(null);
  const [products, setProducts] = useState([]);
  const [cart, setCart] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // 获取用户信息
  useEffect(() => {
    async function fetchUser() {
      setLoading(true);
      try {
        const response = await fetch('/api/user');
        const data = await response.json();
        (data);
      }  (err) {
        ();
      }  {
        ();
      }
    }
    ();
  }, []);

  
  ( {
      () {
      ();
       {
         response =  ();
         data =  response.();
        (data);
      }  (err) {
        ();
      }  {
        ();
      }
    }
    ();
  }, []);

    = () => {
    ( [...prevCart, product]);
  };

    = () => {
    ( prevCart.( item. !== productId));
  };

   (
    
  );
}

  ;

// store.js import React, { createContext, useContext, useReducer } from 'react'; const initialState = { user: null, products: [], cart: [], loading: false, error: null }; const ActionTypes = { SET_USER: 'SET_USER', SET_PRODUCTS: 'SET_PRODUCTS', ADD_TO_CART: 'ADD_TO_CART', REMOVE_FROM_CART: 'REMOVE_FROM_CART', SET_LOADING: 'SET_LOADING', SET_ERROR: 'SET_ERROR' }; function reducer(state, action) { switch (action.type) { case ActionTypes.SET_USER: return { ...state, user: action.payload }; case ActionTypes.SET_PRODUCTS: return { ...state, products: action.payload }; case ActionTypes.ADD_TO_CART: return { ...state, cart: [...state.cart, action.payload] }; case ActionTypes.REMOVE_FROM_CART: return { ...state, cart: state.cart.filter(item => item.id !== action.payload) }; case ActionTypes.SET_LOADING: return { ...state, loading: action.payload }; case ActionTypes.SET_ERROR: return { ...state, error: action.payload }; default: return state; } } const StoreContext = createContext(); export function StoreProvider({ children }) { const [state, dispatch] = useReducer(reducer, initialState); return ( <StoreContext.Provider value={{ state, dispatch }}> {children} </StoreContext.Provider> ); } export function useStore() { const context = useContext(StoreContext); if (!context) { throw new Error('useStore must be used within a StoreProvider'); } return context; } export const actions = { setUser: (user) => ({ type: ActionTypes.SET_USER, payload: user }), setProducts: (products) => ({ type: ActionTypes.SET_PRODUCTS, payload: products }), addToCart: (product) => ({ type: ActionTypes.ADD_TO_CART, payload: product }), removeFromCart: (productId) => ({ type: ActionTypes.REMOVE_FROM_CART, payload: productId }), setLoading: (loading) => ({ type: ActionTypes.SET_LOADING, payload: loading }), setError: (error) => ({ type: ActionTypes.SET_ERROR, payload: error }) };

前端状态管理对比：如何选择合适的方案