什么是React中的副作用

在 React 的语境中，副作用（Side Effects） 指的是那些会影响外部环境，且无法在组件渲染过程中直接控制的操作。这些操作通常与 React 的核心渲染逻辑（将 props 和 state 转换为 UI）无关，但在实际应用中又是必需的。

常见的副作用场景

1. 数据获取 ：从 API 加载数据（如 fetch、axios）
2. DOM 操作：手动修改 DOM 元素（如调整滚动位置、添加事件监听）
3. 定时器 ：设置 setTimeout、setInterval
4. 订阅：订阅外部数据源（如 WebSocket、Redux store）
5. 日志记录 ：调用 console.log 或发送分析数据

为什么副作用需要特殊处理？

React 的渲染过程是声明式 且可能是异步/批量执行的。如果副作用直接嵌入渲染逻辑中，可能导致：

• 重复执行：组件多次渲染时副作用被重复触发（如多次发送 API 请求）
• 竞态条件：异步操作顺序混乱（如新请求覆盖旧请求的结果）
• 内存泄漏：未清理的定时器或订阅持续占用资源

React 如何处理副作用？

1. 类组件中的副作用

通过生命周期方法（如 componentDidMount、componentDidUpdate、componentWillUnmount）：

class Example extends React.Component {
  componentDidMount() {
    // 挂载后执行副作用（如数据获取）
    fetchData().then(data => this.setState({ data }));
  }

  componentDidUpdate(prevProps) {
    // 更新后执行副作用（如对比 props 变化）
    if (prevProps.id !== this.props.id) {
      fetchData(this.props.id);
    }
  }

  componentWillUnmount() {
    // 卸载前清理副作用（如取消订阅）
    this.subscription.unsubscribe();
  }
}

2. 函数组件中的副作用

通过 useEffect Hook：

const Example = ({ id }) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 副作用逻辑（相当于 componentDidMount + componentDidUpdate）
    const fetchData = async () => {
      const result = await api.getData(id);
      setData(result);
    };
    fetchData();

    // 清理函数（相当于 componentWillUnmount）
    return () => {
      // 取消未完成的请求或清理资源
    };
  }, [id]); // 依赖项数组：仅当 id 变化时重新执行副作用

  return <div>{data}</div>;
};

useEffect 的工作原理

1. 默认行为 ：组件每次渲染后都会执行副作用（包括首次渲染和后续更新）。
2. 依赖项数组 ：
   • 空数组 [] ：仅在首次渲染后执行（相当于 componentDidMount）
   • 包含变量 [var1, var2]：仅当变量变化时执行
   • 不提供数组：每次渲染都执行（包括 state 更新和父组件重新渲染）
3. 清理函数：副作用函数返回的函数会在组件卸载前执行，用于清理资源。

副作用的最佳实践

1. 保持纯渲染 ：避免在渲染过程中直接执行副作用（如在 JSX 中调用 fetch）。

2. 最小化依赖：在依赖项数组中包含所有会影响副作用的变量，防止竞态条件。

3. 异步操作处理 ：

   useEffect(() => {
     let isMounted = true; // 防止组件卸载后更新状态
   
     fetchData().then(data => {
       if (isMounted) setData(data);
     });
   
     return () => (isMounted = false);
   }, []);

4. 拆分副作用 ：根据不同依赖拆分多个 useEffect，提高代码清晰度。

总结

副作用是 React 组件与外部世界交互的桥梁，但需要谨慎管理以避免意外行为。通过 useEffect 或生命周期方法，React 提供了可控的方式来执行、跟踪和清理副作用，确保组件的声明式特性不受影响。