useEffect

useEffect

useEffect 是 React 中用于处理副作用（side effects）的 Hook，它可以看作是函数组件中对生命周期方法（如 componentDidMount、componentDidUpdate 和 componentWillUnmount）的统一替代。

基本概念

纯函数与副作用

在 React 中，函数组件应该尽量保持为纯函数------即它们只依赖于输入（props 和 state）来生成 UI。然而，在实际应用中，我们需要执行一些与渲染无关的操作，比如：

• 发送网络请求获取数据
• 添加事件监听器
• 操作 DOM 元素
• 订阅数据流（如 WebSocket）

这些操作不直接影响组件的渲染输出，但它们会改变组件外部的状态或与外部环境交互，所以称为 side effects（副作用）。React 使用 useEffect 来集中管理这些副作用，使得组件逻辑更加清晰，同时保持渲染逻辑的纯净性。

组件生命周期

函数组件本身没有传统意义上的生命周期方法，比如类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount。

然而，我们可以通过 Hooks（尤其是 useEffect）来模拟和管理函数组件的生命周期行为。

1. 挂载阶段（Mounting）

   当组件第一次渲染到页面上时就是挂载阶段 ，相当于类组件的 componentDidMount。

   你可以在 useEffect 中传入一个空依赖数组 []，这样这个 effect 只会在组件挂载后执行一次。

   useEffect(() => {
   // 组件挂载后执行
   console.log("组件已挂载");
   
   // 可选：返回一个清理函数，在组件卸载时调用
   return () => {
       console.log("组件将卸载");
   };
   }, []);

2. 更新阶段（Updating）

   每当组件的 props 或 state 发生变化时，组件会重新渲染， 这相当于类组件的 componentDidUpdate。如果你希望 effect 在特定依赖（例如某个 state 或 props）变化时执行，可以将它们放在依赖数组中。

   useEffect(() => {
   // 当 count 变化时, useEffect 将执行
   console.log("count 更新为:", count);
   }, [count]);

3. 卸载阶段（Unmounting）

   当组件从页面中移除时，可以通过 effect 的返回函数来进行清理工作，类似于类组件中的 componentWillUnmount。

   useEffect(() => {
   // 挂载时执行的逻辑...
   
   return () => {
       // 卸载时执行的清理操作
       console.log("组件卸载");
   };
   }, []);

另外，还有 useLayoutEffect，它与 useEffect 类似，但会在 DOM 变更后、浏览器绘制前同步执行，适合需要立即读取布局信息的情况。

这种设计符合 React 的单向数据流和函数式编程理念，让状态管理和副作用处理更加集中和可预测。

注意事项

• 依赖数组必须准确：遗漏依赖可能导致数据不一致或 bug；添加不必要的依赖则可能导致不必要的重新执行。

• 清理函数的重要性：确保在 effect 中创建的资源能在组件卸载或更新前正确释放。