React框架深度解析：如何通过思维链与行动结合完成复杂任务

1次阅读

共计 3918 个字符，预计需要花费 10 分钟才能阅读完成。

React 的核心设计理念是 ”Thinking in React”（React 思维），这种思维方式强调将 UI 拆分为独立的组件，并通过单向数据流（Unidirectional Data Flow）来管理状态。这种设计有以下几个关键点：

组件树结构 ：React 应用是由多个组件构成的树形结构，数据从父组件流向子组件
props 向下传递 ：父组件通过 props 将数据传递给子组件
状态提升 ：当多个组件需要共享状态时，将状态提升到最近的共同祖先组件
单一数据源 ：每个状态只保存在一个地方，避免数据不一致

这种设计模式强制开发者明确数据流向，使得应用状态更可预测和可维护。

class Counter extends React.Component {state = { count: 0};

  increment = () => {
    this.setState(prevState => ({count: prevState.count + 1}));
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

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

  const increment = () => {setCount(prevCount => prevCount + 1);
  };

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

Hooks 的工作原理：

useState：在函数组件内部维护一个状态链表，调用顺序决定了状态的对应关系
useEffect：处理副作用，可以模拟类组件的生命周期方法
useReducer：适合复杂状态逻辑，类似于 Redux 的 reducer 模式
useMemo/useCallback：用于性能优化，避免不必要的重新计算

// 定义购物车状态类型
type CartItem = {
  id: string;
  name: string;
  price: number;
  quantity: number;
};

type CartState = {items: CartItem[];
  total: number;
  discount: number;
};

// 定义 action 类型
type CartAction = 
  | {type: 'ADD_ITEM'; payload: CartItem}
  | {type: 'REMOVE_ITEM'; id: string}
  | {type: 'UPDATE_QUANTITY'; id: string; quantity: number}
  | {type: 'APPLY_DISCOUNT'; discount: number};

// 创建 context
const CartContext = React.createContext<{
  state: CartState;
  dispatch: React.Dispatch<CartAction>;
} | undefined>(undefined);

// reducer 函数
function cartReducer(state: CartState, action: CartAction): CartState {switch (action.type) {
    case 'ADD_ITEM':
      // 检查是否已存在
      const existingItemIndex = state.items.findIndex(item => item.id === action.payload.id);
      if (existingItemIndex >= 0) {const updatedItems = [...state.items];
        updatedItems[existingItemIndex].quantity += action.payload.quantity;
        return {
          ...state,
          items: updatedItems,
          total: calculateTotal(updatedItems, state.discount)
        };
      }
      return {
        ...state,
        items: [...state.items, action.payload],
        total: calculateTotal([...state.items, action.payload], state.discount)
      };

    case 'REMOVE_ITEM':
      const filteredItems = state.items.filter(item => item.id !== action.id);
      return {
        ...state,
        items: filteredItems,
        total: calculateTotal(filteredItems, state.discount)
      };

    case 'UPDATE_QUANTITY':
      const updatedItems = state.items.map(item => 
        item.id === action.id ? {...item, quantity: action.quantity} : item
      );
      return {
        ...state,
        items: updatedItems,
        total: calculateTotal(updatedItems, state.discount)
      };

    case 'APPLY_DISCOUNT':
      return {
        ...state,
        discount: action.discount,
        total: calculateTotal(state.items, action.discount)
      };

    default:
      return state;
  }
}

// 计算总价
function calculateTotal(items: CartItem[], discount: number): number {const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  return subtotal * (1 - discount / 100);
}

// Provider 组件
function CartProvider({children}: {children: React.ReactNode}) {const [state, dispatch] = React.useReducer(cartReducer, {items: [],
    total: 0,
    discount: 0
  });

  // 使用 memo 优化 context 值
  const contextValue = React.useMemo(() => ({ state, dispatch}), [state]);

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

// 自定义 hook
function useCart() {const context = React.useContext(CartContext);
  if (!context) {throw new Error('useCart must be used within a CartProvider');
  }
  return context;
}

关键优化点：

memoization：使用 React.memo 包裹纯展示组件，避免不必要的重新渲染
选择性 context：将大 context 拆分为多个小 context，减少不必要更新
useMemo/useCallback：缓存计算结果和函数引用
虚拟列表 ：对于长列表使用 react-window 或 react-virtualized

// 错误示例 - 缺少依赖项
useEffect(() => {fetchData(id);
}, []); // 缺少 id 依赖

// 正确示例 1 - 包含所有依赖
useEffect(() => {fetchData(id);
}, [id, fetchData]);

// 正确示例 2 - 使用函数式更新
useEffect(() => {function handleScroll() {setScrollY(window.scrollY);
  }

  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []); // 不需要依赖，因为 setScrollY 是稳定的

特性	Redux	Zustand
学习曲线	陡峭	平缓
样板代码	多	少
中间件支持	丰富	有限
性能	一般	优秀
开发体验	一般	优秀
适用场景	大型团队项目	中小型项目