React轻量级状态管理方案（useReducer + Context API）

React轻量级状态管理方案（useReducer + Context API）

🤔 为什么需要轻量级状态管理？

在React应用开发中，随着组件层次的增加和状态复杂度的提升，传统的props传递方式会变得越来越繁琐：

• 多层级组件需要通过props逐层传递数据（props drilling）
• 多个组件共享同一份状态时，状态同步变得困难
• 组件间通信需要通过复杂的回调函数
• 大型状态管理库（如Redux）可能带来不必要的复杂性

对于中等规模的应用，我们可以使用React内置的useReducer和Context API组合，实现一个轻量级、高效的状态管理方案，既避免了props drilling，又不需要引入额外的依赖。

💡 基础概念

1. useReducer Hook

useReducer是React提供的一个Hook，用于管理复杂的状态逻辑。它类似于Redux的思想：

• 状态通过reducer函数进行更新
• 状态更新需要派发（dispatch）一个动作（action）
• reducer函数接收当前状态和动作，返回新的状态

语法：

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

2. Context API

Context API是React提供的一种在组件树中共享数据的方式，不需要通过props逐层传递：

• 使用createContext创建一个Context对象
• 使用Provider组件包裹需要共享数据的组件树
• 使用useContext在子组件中获取共享数据

语法：

// 创建Context
const MyContext = createContext(defaultValue);

// 提供Context
<MyContext.Provider value={value}>
  {/* 子组件 */}
</MyContext.Provider>

// 消费Context
const value = useContext(MyContext);

🚀 基础实现：计数器应用

让我们先通过一个简单的计数器应用，了解useReducer和Context API的基础用法。

1. 创建状态管理文件

// src/contexts/CounterContext.js
import React, { createContext, useContext, useReducer } from 'react';

// 定义初始状态
const initialState = {
  count: 0,
  history: [0],
  isUndoDisabled: true,
  isRedoDisabled: true
};

// 定义action类型
const ActionTypes = {
  INCREMENT: 'INCREMENT',
  DECREMENT: 'DECREMENT',
  RESET: 'RESET',
  UNDO: 'UNDO',
  REDO: 'REDO',
  SET_COUNT: 'SET_COUNT'
};

// 创建reducer函数
const counterReducer = (state, action) => {
  switch (action.type) {
    case ActionTypes.INCREMENT:
      return {
        ...state,
        count: state.count + 1,
        history: [...state.history, state.count + 1],
        currentIndex: state.history.length,
        isUndoDisabled: false,
        isRedoDisabled: true
      };
      
    case ActionTypes.DECREMENT:
      return {
        ...state,
        count: state.count - 1,
        history: [...state.history, state.count - 1],
        currentIndex: state.history.length,
        isUndoDisabled: false,
        isRedoDisabled: true
      };
      
    case ActionTypes.RESET:
      return {
        ...state,
        count: 0,
        history: [...state.history, 0],
        currentIndex: state.history.length,
        isUndoDisabled: false,
        isRedoDisabled: true
      };
      
    case ActionTypes.UNDO:
      if (state.currentIndex <= 0) return state;
      const newIndex = state.currentIndex - 1;
      return {
        ...state,
        count: state.history[newIndex],
        currentIndex: newIndex,
        isUndoDisabled: newIndex === 0,
        isRedoDisabled: false
      };
      
    case ActionTypes.REDO:
      if (state.currentIndex >= state.history.length - 1) return state;
      const nextIndex = state.currentIndex + 1;
      return {
        ...state,
        count: state.history[nextIndex],
        currentIndex: nextIndex,
        isUndoDisabled: false,
        isRedoDisabled: nextIndex === state.history.length - 1
      };
      
    case ActionTypes.SET_COUNT:
      return {
        ...state,
        count: action.payload,
        history: [...state.history.slice(0, state.currentIndex + 1), action.payload],
        currentIndex: state.currentIndex + 1,
        isUndoDisabled: false,
        isRedoDisabled: true
      };
      
    default:
      return state;
  }
};

// 创建Context
const CounterContext = createContext(null);

// 创建Provider组件
export const CounterProvider = ({ children }) => {
  const [state, dispatch] = useReducer(counterReducer, initialState);
  
  // 定义操作函数
  const actions = {
    increment: () => dispatch({ type: ActionTypes.INCREMENT }),
    decrement: () => dispatch({ type: ActionTypes.DECREMENT }),
    reset: () => dispatch({ type: ActionTypes.RESET }),
    undo: () => dispatch({ type: ActionTypes.UNDO }),
    redo: () => dispatch({ type: ActionTypes.REDO }),
    setCount: (value) => dispatch({ type: ActionTypes.SET_COUNT, payload: value })
  };
  
  return (
    <CounterContext.Provider value={{ state, ...actions }}>
      {children}
    </CounterContext.Provider>
  );
};

// 创建自定义Hook，方便在组件中使用
export const useCounter = () => {
  const context = useContext(CounterContext);
  if (!context) {
    throw new Error('useCounter must be used within a CounterProvider');
  }
  return context;
};

2. 在应用中使用Provider

// src/App.js
import React from 'react';
import { CounterProvider } from './contexts/CounterContext';
import CounterDisplay from './components/CounterDisplay';
import CounterControls from './components/CounterControls';
import CounterHistory from './components/CounterHistory';

function App() {
  return (
    <CounterProvider>
      <div className="app">
        <h1>React 轻量级状态管理示例</h1>
        <CounterDisplay />
        <CounterControls />
        <CounterHistory />
      </div>
    </CounterProvider>
  );
}

export default App;

3. 创建消费组件

// src/components/CounterDisplay.js
import React from 'react';
import { useCounter } from '../contexts/CounterContext';

const CounterDisplay = () => {
  const { state } = useCounter();
  
  return (
    <div className="counter-display">
      <h2>当前计数：</h2>
      <div className="count-value">{state.count}</div>
    </div>
  );
};

export default CounterDisplay;

// src/components/CounterControls.js
import React from 'react';
import { useCounter } from '../contexts/CounterContext';

const CounterControls = () => {
  const { increment, decrement, reset, undo, redo, state } = useCounter();
  
  return (
    <div className="counter-controls">
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
      <button onClick={reset}>重置</button>
      <button 
        onClick={undo} 
        disabled={state.isUndoDisabled}
        title="撤销"
      >
        ↶
      </button>
      <button 
        onClick={redo} 
        disabled={state.isRedoDisabled}
        title="重做"
      >
        ↷
      </button>
    </div>
  );
};

export default CounterControls;

// src/components/CounterHistory.js
import React from 'react';
import { useCounter } from '../contexts/CounterContext';

const CounterHistory = () => {
  const { state, setCount } = useCounter();
  
  return (
    <div className="counter-history">
      <h3>计数历史</h3>
      <div className="history-list">
        {state.history.map((count, index) => (
          <button
            key={index}
            className={`history-item ${index === state.currentIndex ? 'active' : ''}`}
            onClick={() => setCount(count)}
          >
            {count}
          </button>
        ))}
      </div>
    </div>
  );
};

export default CounterHistory;

🎯 进阶实现：购物车应用

让我们通过一个更复杂的购物车应用，展示这个状态管理方案的强大功能。

1. 创建购物车状态管理

// src/contexts/CartContext.js
import React, { createContext, useContext, useReducer } from 'react';

// 定义初始状态
const initialState = {
  items: [],
  totalItems: 0,
  totalPrice: 0
};

// 定义action类型
const ActionTypes = {
  ADD_ITEM: 'ADD_ITEM',
  REMOVE_ITEM: 'REMOVE_ITEM',
  UPDATE_QUANTITY: 'UPDATE_QUANTITY',
  CLEAR_CART: 'CLEAR_CART',
  TOGGLE_ITEM_SELECTION: 'TOGGLE_ITEM_SELECTION',
  SELECT_ALL_ITEMS: 'SELECT_ALL_ITEMS'
};

// 创建reducer函数
const cartReducer = (state, action) => {
  switch (action.type) {
    case ActionTypes.ADD_ITEM: {
      const { product, quantity = 1 } = action.payload;
      const existingItemIndex = state.items.findIndex(item => item.product.id === product.id);
      
      let newItems;
      if (existingItemIndex >= 0) {
        // 商品已存在，更新数量
        newItems = [...state.items];
        newItems[existingItemIndex] = {
          ...newItems[existingItemIndex],
          quantity: newItems[existingItemIndex].quantity + quantity
        };
      } else {
        // 新商品，添加到购物车
        newItems = [...state.items, { product, quantity, selected: true }];
      }
      
      return calculateTotals(newItems);
    }
    
    case ActionTypes.REMOVE_ITEM: {
      const newItems = state.items.filter(item => item.product.id !== action.payload);
      return calculateTotals(newItems);
    }
    
    case ActionTypes.UPDATE_QUANTITY: {
      const { productId, quantity } = action.payload;
      if (quantity <= 0) {
        return state;
      }
      
      const newItems = state.items.map(item => 
        item.product.id === productId 
          ? { ...item, quantity } 
          : item
      );
      
      return calculateTotals(newItems);
    }
    
    case ActionTypes.CLEAR_CART: {
      return initialState;
    }
    
    case ActionTypes.TOGGLE_ITEM_SELECTION: {
      const newItems = state.items.map(item => 
        item.product.id === action.payload 
          ? { ...item, selected: !item.selected } 
          : item
      );
      
      return calculateTotals(newItems);
    }
    
    case ActionTypes.SELECT_ALL_ITEMS: {
      const { selected } = action.payload;
      const newItems = state.items.map(item => ({ ...item, selected }));
      return calculateTotals(newItems);
    }
    
    default:
      return state;
  }
};

// 计算购物车总计
const calculateTotals = (items) => {
  const totalItems = items.reduce((sum, item) => sum + item.quantity, 0);
  const totalPrice = items.reduce((sum, item) => 
    sum + (item.selected ? item.product.price * item.quantity : 0), 0
  );
  
  return {
    items,
    totalItems,
    totalPrice
  };
};

// 创建Context
const CartContext = createContext(null);

// 创建Provider组件
export const CartProvider = ({ children }) => {
  const [state, dispatch] = useReducer(cartReducer, initialState);
  
  // 定义操作函数
  const actions = {
    addItem: (product, quantity = 1) => 
      dispatch({ type: ActionTypes.ADD_ITEM, payload: { product, quantity } }),
    
    removeItem: (productId) => 
      dispatch({ type: ActionTypes.REMOVE_ITEM, payload: productId }),
    
    updateQuantity: (productId, quantity) => 
      dispatch({ type: ActionTypes.UPDATE_QUANTITY, payload: { productId, quantity } }),
    
    clearCart: () => 
      dispatch({ type: ActionTypes.CLEAR_CART }),
    
    toggleItemSelection: (productId) => 
      dispatch({ type: ActionTypes.TOGGLE_ITEM_SELECTION, payload: productId }),
    
    selectAllItems: (selected) => 
      dispatch({ type: ActionTypes.SELECT_ALL_ITEMS, payload: { selected } })
  };
  
  // 导出额外的计算属性
  const computed = {
    // 获取选中的商品
    selectedItems: state.items.filter(item => item.selected),
    // 获取选中商品的数量
    selectedItemsCount: state.items.reduce((sum, item) => 
      sum + (item.selected ? item.quantity : 0), 0
    ),
    // 是否全选
    isAllSelected: state.items.length > 0 && state.items.every(item => item.selected)
  };
  
  return (
    <CartContext.Provider value={{ state, ...actions, ...computed }}>
      {children}
    </CartContext.Provider>
  );
};

// 创建自定义Hook
export const useCart = () => {
  const context = useContext(CartContext);
  if (!context) {
    throw new Error('useCart must be used within a CartProvider');
  }
  return context;
};

2. 商品列表组件

// src/components/ProductList.js
import React from 'react';
import { useCart } from '../contexts/CartContext';

const ProductList = () => {
  // 模拟商品数据
  const products = [
    { id: 1, name: 'React Hooks 实战', price: 89.99, category: '书籍' },
    { id: 2, name: 'JavaScript 高级程序设计', price: 99.99, category: '书籍' },
    { id: 3, name: '前端工程化实践', price: 79.99, category: '书籍' },
    { id: 4, name: 'Vue.js 从入门到精通', price: 85.99, category: '书籍' },
    { id: 5, name: 'TypeScript 权威指南', price: 95.99, category: '书籍' }
  ];
  
  const { addItem } = useCart();
  
  return (
    <div className="product-list">
      <h2>商品列表</h2>
      <div className="products">
        {products.map(product => (
          <div key={product.id} className="product-card">
            <h3>{product.name}</h3>
            <p className="product-price">¥{product.price.toFixed(2)}</p>
            <p className="product-category">{product.category}</p>
            <button 
              className="add-to-cart-btn"
              onClick={() => addItem(product, 1)}
            >
              添加到购物车
            </button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ProductList;

3. 购物车组件

// src/components/ShoppingCart.js
import React from 'react';
import { useCart } from '../contexts/CartContext';

const ShoppingCart = () => {
  const { 
    state, 
    removeItem, 
    updateQuantity, 
    clearCart, 
    toggleItemSelection,
    selectAllItems,
    isAllSelected,
    selectedItemsCount
  } = useCart();
  
  return (
    <div className="shopping-cart">
      <h2>购物车 ({state.totalItems} 件商品)</h2>
      
      {state.items.length === 0 ? (
        <p className="empty-cart">购物车是空的</p>
      ) : (
        <>
          <div className="cart-header">
            <button 
              className="select-all-btn"
              onClick={() => selectAllItems(!isAllSelected)}
            >
              {isAllSelected ? '取消全选' : '全选'}
            </button>
            <button 
              className="clear-cart-btn"
              onClick={clearCart}
            >
              清空购物车
            </button>
          </div>
          
          <div className="cart-items">
            {state.items.map(item => (
              <div key={item.product.id} className="cart-item">
                <div className="item-select">
                  <input 
                    type="checkbox" 
                    checked={item.selected} 
                    onChange={() => toggleItemSelection(item.product.id)}
                  />
                </div>
                
                <div className="item-info">
                  <h4>{item.product.name}</h4>
                  <p className="item-price">¥{item.product.price.toFixed(2)}</p>
                </div>
                
                <div className="item-quantity">
                  <button 
                    className="quantity-btn"
                    onClick={() => updateQuantity(item.product.id, item.quantity - 1)}
                  >
                    -
                  </button>
                  <span>{item.quantity}</span>
                  <button 
                    className="quantity-btn"
                    onClick={() => updateQuantity(item.product.id, item.quantity + 1)}
                  >
                    +
                  </button>
                </div>
                
                <div className="item-total">
                  ¥{(item.product.price * item.quantity).toFixed(2)}
                </div>
                
                <button 
                  className="remove-btn"
                  onClick={() => removeItem(item.product.id)}
                >
                  删除
                </button>
              </div>
            ))}
          </div>
          
          <div className="cart-summary">
            <div className="summary-info">
              <p>已选商品：{selectedItemsCount} 件</p>
              <p>合计：<span className="total-price">¥{state.totalPrice.toFixed(2)}</span></p>
            </div>
            <button className="checkout-btn">去结算</button>
          </div>
        </>
      )}
    </div>
  );
};

export default ShoppingCart;

⚠️ 注意事项

1. 性能优化

• 避免不必要的重渲染 ：使用React.memo优化组件，避免因Context更新导致所有子组件重渲染
• 拆分Context：根据功能将状态拆分为多个独立的Context，避免单一Context过大
• 使用useMemo ：在Provider中使用useMemo缓存值，避免不必要的Context值更新

// 在Provider中使用useMemo优化
const value = useMemo(() => ({ state, ...actions }), [state, actions]);

return (
  <CounterContext.Provider value={value}>
    {children}
  </CounterContext.Provider>
);

2. 状态设计原则

• 单一数据源：每个状态最好只在一个地方管理
• 不可变性：状态更新时应返回新的状态对象，而不是直接修改原状态
• 合理拆分：将相关的状态和操作放在一起，避免单一reducer处理所有状态

3. 调试技巧

• 使用React DevTools的Context选项卡查看Context值
• 在reducer函数中添加日志，跟踪状态更新过程
• 使用Redux DevTools Extension（需要额外配置）查看状态历史和action记录

4. 应用场景

这种轻量级状态管理方案适用于：

• 中等规模的React应用
• 需要避免props drilling的组件树
• 多个组件共享同一份状态
• 不希望引入额外依赖的项目

对于大型复杂应用，可能仍然需要使用专业的状态管理库（如Redux、MobX）。

📝 总结

通过组合使用React内置的useReducer和Context API，我们可以实现一个轻量级、高效的状态管理方案：

1. 避免props drilling：通过Context在组件树中直接共享状态
2. 集中管理状态：使用reducer函数统一处理状态更新逻辑
3. 简化组件间通信：组件可以直接获取和更新共享状态
4. 无需额外依赖：利用React内置功能，减少项目依赖
5. 良好的可维护性：状态逻辑与UI组件分离，便于测试和维护

这种方案兼顾了简洁性和功能性，是中等规模React应用的理想选择。通过合理的状态设计和性能优化，我们可以构建出高效、可维护的前端应用。

希望这个小技巧对你有所帮助！如果你有任何问题或建议，欢迎在评论区留言讨论 🤗

---

相关资源：

• React 官方文档 - useReducer
• React 官方文档 - Context API
• MDN - JavaScript Array Methods

标签： #React #状态管理 #useReducer #ContextAPI #前端开发