React多useEffect场景下清理函数调用规则及相关问题咨询

1. 多个清理函数的调用顺序 #

清理函数的执行遵循后进先出的规则，和useEffect在代码中声明的顺序完全相反。
举个实际的代码示例：

function TestComponent() {
  // 第一个声明的useEffect
  useEffect(() => {
    console.log('运行第一个effect')
    return () => console.log('运行第一个清理函数')
  }, [])

  // 第二个声明的useEffect
  useEffect(() => {
    console.log('运行第二个effect')
    return () => console.log('运行第二个清理函数')
  }, [])

  return <div>测试组件</div>
}

组件挂载时，effect会按声明顺序从上到下执行，输出顺序为运行第一个effect→运行第二个effect；组件卸载或者effect触发重新执行时，清理函数会反向执行，输出顺序为运行第二个清理函数→运行第一个清理函数。

2. 组件卸载时是否所有清理函数都会被触发 #

是的，所有已经执行过的useEffect对应的清理函数，都会在组件卸载时全部触发，不会出现遗漏。
需要注意的是：如果某个useEffect因为依赖项未满足从未被执行过，它对应的清理函数自然也不会被触发，这个是符合预期的正常逻辑。

3. 多清理函数的实际项目使用案例 #

实际开发中拆分多个useEffect、对应多个清理函数是非常常见的用法，典型场景包括：

• 独立副作用的拆分维护：比如同一个组件内同时需要监听窗口resize事件、订阅全局消息总线、发起异步数据请求，拆成三个独立的useEffect，分别对应移除事件监听、取消消息订阅、中断未完成请求三个清理逻辑，每个副作用和自己的清理逻辑绑定，代码耦合度低，维护起来更方便。
• 按依赖维度拆分逻辑：比如部分副作用依赖用户ID，部分依赖商品ID，拆分后当某个依赖变化时，只会触发对应useEffect的清理逻辑，不需要连带执行其他不相关的清理操作，性能更优也不会出现逻辑误执行的问题。
• 第三方实例的单独销毁：比如组件内同时初始化了图表实例、富文本编辑器实例两个第三方工具实例，分别放在两个useEffect中处理初始化和销毁逻辑，避免把所有销毁逻辑堆在同一个清理函数里，减少漏销毁导致内存泄漏的概率。

内容的提问来源于stack exchange，提问作者Nisha Dave