EnlightenCode

React Hooks 核心指南 🚀 ​

useState - 状态管理的基石 ⚡ ​

基本语法 ​

js
const [state, setState] = useState(initialState);

重要特性与注意事项 🎯 ​

  1. 使用规则

    • 返回一个状态值和更新函数
    • 初始渲染时，状态值等于 initialState
    • setState 用于更新状态并触发重渲染

  2. 使用限制 ⚠️

    • 只能在函数组件顶层调用
    • 不能在循环、条件判断或嵌套函数中使用
    • 只能在 React 函数组件中使用

  3. 最佳实践

js
// 正确的状态更新方式
const handleClick = () => {
  setCount(prevCount => prevCount + 1);
};

// 对象状态更新
const [user, setUser] = useState({ name: '', age: 0 });
setUser(prev => ({ ...prev, name: 'React' }));

useEffect - 副作用处理利器 🔄 ​

基本用法 ​

js
useEffect(() => {
  // 副作用代码
  return () => {
    // 清理代码
  };
}, [dependencies]);

关键特性 🌟 ​

  1. 执行时机

    • 组件挂载后
    • 依赖项更新时
    • 组件卸载前（清理函数）

  2. 依赖数组使用策略

    • []: 仅在挂载和卸载时执行
    • [dep1, dep2]: 在依赖项变化时执行
    • 不提供: 每次渲染后执行

  3. 清理副作用示例

js
useEffect(() => {
  const handler = () => console.log('窗口大小改变');
  window.addEventListener('resize', handler);
  
  return () => {
    window.removeEventListener('resize', handler);
  };
}, []);

useContext - 跨组件状态共享 🌳 ​

使用步骤 ​

  1. 创建 Context
js
const ThemeContext = React.createContext(defaultValue);
  1. 提供 Context
js
<ThemeContext.Provider value={theme}>
  <App />
</ThemeContext.Provider>
  1. 消费 Context
js
const theme = useContext(ThemeContext);

useReducer - 复杂状态管理 ⚙️ ​

基本语法 ​

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

示例 ​

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

// 使用
const [state, dispatch] = useReducer(reducer, { count: 0 });

useState vs useReducer 对比 🤔 ​

场景推荐使用
简单原始类型状态useState
复杂对象/数组状态useReducer
多个相关状态变化useReducer
复杂业务逻辑useReducer
组件内局部状态useState
全局状态管理useReducer

最佳实践建议 💡 ​

  1. 合理使用依赖数组避免无限循环
  2. 及时清理副作用避免内存泄漏
  3. 使用函数式更新保证状态更新的可靠性
  4. Context 适度使用，避免过度使用导致性能问题
  5. 根据场景选择合适的状态管理方案