第二章：React Hooks

useEffect

useEffect 是 React Hooks 中用于处理副作用的钩子函数。它允许你在函数组件中执行副作用操作，例如数据获取、订阅、手动修改 DOM 等。

基本语法

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 副作用逻辑
    return () => {
      // 清理逻辑（可选）
    };
  }, [dependencies]); // 依赖数组（可选）
}

核心功能

  1. 执行副作用

    • 在组件渲染后执行代码
    • 常见用例：API调用、事件监听、定时器

  2. 清理机制

    • 通过返回一个清理函数来避免内存泄漏
    • 在组件卸载或依赖项变化前执行

  3. 依赖控制

    • 通过第二个参数控制何时重新执行effect
    • 空数组[]表示只在挂载时执行一次
    • 省略则每次渲染都会执行

使用示例

// 数据获取示例
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(`/api/users/${userId}`);
      setUser(await response.json());
    };

    fetchData();
    
    return () => {
      // 取消未完成的请求（实际实现可能需要AbortController）
    };
  }, [userId]); // 当userId变化时重新获取
}

注意事项

  1. 避免无限循环

    • 确保依赖数组中包含所有effect内部使用的状态和props
    • 但不要包含会频繁变化的值（如函数引用）

  2. 性能优化

    • 将不相关的逻辑拆分到多个useEffect
    • 对于复杂计算，考虑使用useMemo

  3. SSR兼容性

    • useEffect只在客户端执行
    • 服务端渲染时需要使用其他数据获取方式

替代方案

对于某些特定场景，可以考虑：

  • useLayoutEffect：当需要同步更新DOM时
  • React Query/SWR：专门的数据获取库
  • 自定义Hooks：封装可复用的副作用逻辑

useEffect是React函数组件中管理副作用的基石，合理使用可以大大简化组件的生命周期管理。

Last Updated::