react18 挂载mount和卸载unmount 触发方式写法

在 React 18 中，组件的挂载（mount）和卸载（unmount）逻辑主要通过 useEffect Hook 实现。以下是总结 React 18 中触发挂载和卸载的方式，以及相关要点：

---

1. 挂载（Mount）触发方式

挂载是指组件首次被渲染到 DOM 中。React 使用 useEffect 来处理挂载时的逻辑。

触发方式

• 使用 useEffect 搭配空依赖数组（[]）：
  • 当依赖数组为空时，useEffect 的回调函数只在组件挂载时运行一次。
  • 示例：

    import { useEffect } from 'react';
    
    function MyComponent() {
      useEffect(() => {
        console.log('组件挂载了');
      }, []); // 空数组，只在挂载时运行
    
      return <div>Hello</div>;
    }
    

  • 时机：组件首次渲染完成后执行，类似于 Vue 3 的 onMounted。

特点

• 只运行一次，除非组件被卸载后重新挂载。
• 常用于初始化操作，如接口请求、订阅事件等。

---

2. 卸载（Unmount）触发方式

卸载是指组件从 DOM 中移除。React 通过 useEffect 的清理函数（cleanup function）处理卸载逻辑。

触发方式

• 在 useEffect 中返回清理函数：
  • 清理函数在组件卸载时执行。如果依赖数组为空（[]），仅在卸载时运行一次。
  • 示例：

    import { useEffect } from 'react';
    
    function MyComponent() {
      useEffect(() => {
        console.log('组件挂载了');
        return () => {
          console.log('组件卸载了');
        };
      }, []); // 空数组，清理函数只在卸载时运行
    
      return <div>Hello</div>;
    }
    

  • 时机：组件从 DOM 中移除时执行，类似于 Vue 3 的 onUnmounted。

特点

• 清理函数用于释放资源，如清除定时器、取消订阅等。
• 如果组件被条件渲染移除（例如 {show && <MyComponent />}），卸载时触发。

---

3. 挂载与卸载结合

useEffect 允许在一个 Hook 中同时处理挂载和卸载逻辑：

useEffect(() => {
  // 挂载逻辑
  console.log('挂载');

  // 返回清理函数，处理卸载逻辑
  return () => {
    console.log('卸载');
  };
}, []); // 空数组确保只在挂载和卸载时运行

• 挂载：回调函数执行。
• 卸载：清理函数执行。

---

4. 动态依赖的情况

如果 useEffect 的依赖数组不为空，挂载和卸载的触发会与依赖变化相关：

• 挂载：组件首次渲染或依赖项变化时，回调函数运行。
• 卸载：依赖项变化前或组件卸载时，清理函数运行。
• 示例：

  useEffect(() => {
    console.log(`挂载或更新，id: ${id}`);
    return () => {
      console.log(`清理旧状态，id: ${id}`);
    };
  }, [id]); // 依赖 id
  

• 行为：
  • id 变化时，先运行清理函数（清理旧状态），再运行回调函数（应用新状态）。
  • 组件卸载时，清理函数运行最后一次。

---

5. 注意事项

• React 18 严格模式（Strict Mode）：

  • 在开发环境下，严格模式会模拟组件挂载和卸载两次：
    • 输出示例："挂载" -> "卸载" -> "挂载"
    • 生产环境下只运行一次。
  • 目的：检测副作用问题。

• 组件重新挂载：

  • 如果组件被卸载后再次渲染（例如条件渲染切换），useEffect 会重新触发挂载逻辑。

• 内存泄漏防范：

  • 在异步操作中，使用标志位确保组件卸载后不更新状态：

    useEffect(() => {
      let isMounted = true;
      fetchData().then(() => {
        if (isMounted) console.log('数据加载');
      });
      return () => {
        isMounted = false;
      };
    }, []);
    

---

总结表格

生命周期阶段	触发方式	执行时机	类似 Vue 3 API
挂载 (Mount)	useEffect(() => {...}, [])	组件首次渲染后	onMounted
卸载 (Unmount)	useEffect(() => { return () => {...} }, [])	组件从 DOM 移除时	onUnmounted
动态更新	useEffect(() => {...}, [deps])	依赖项变化时（含挂载）	无直接对应

---

核心要点

• 挂载：通过 useEffect 搭配空依赖数组（[]），在组件首次渲染后运行。
• 卸载：通过 useEffect 返回清理函数，在组件移除时运行。
• 灵活性：调整依赖数组可实现挂载、卸载与更新逻辑的组合。
• 一致性：React 用单一的 useEffect 统一管理生命周期，相比 Vue 的分离式 API 更紧凑。