React中依赖值关联的清理函数追踪及存储机制疑问

核心逻辑拆解 #

React对useEffect的处理遵循固定流程：

• 每次组件渲染后，若检测到useEffect的依赖数组发生变化，首先执行上一次effect返回的清理函数（如果存在），再执行当前的effect逻辑。
• React会将每个useEffect对应的「上一次清理函数」和「依赖数组快照」，存储在组件内部fiber节点关联的状态中——这是React维护的组件执行上下文，开发者无需直接操作。

结合示例代码分析 #

针对你提供的代码：

1. 初始渲染（canMove=true）
   此时useEffect的依赖数组是[true]，进入if(canMove)分支：添加pointermove事件监听器，同时返回移除该监听器的清理函数。React会把这个清理函数和当前的依赖快照[true]绑定，存在组件内部存储中。

2. 当canMove变为false时
   React检测到依赖数组变为[false]，和上一次的快照不一致，于是先执行上一次effect返回的清理函数——也就是移除pointermove事件监听器，避免内存泄漏。
   之后执行当前的effect逻辑：此时canMove为false，不会进入分支，也就没有返回新的清理函数。React会将该useEffect对应的清理函数存储置为null，后续如果依赖再变化，就不会有旧的清理函数需要执行（除非新的effect又返回了清理函数）。

关键结论 #

• React追踪清理函数的核心是绑定清理函数与对应渲染周期的依赖数组快照，而非依赖当前effect是否返回清理函数。
• 只要依赖数组发生变化，就会触发上一次清理函数的执行，不管当前这次effect有没有新的清理逻辑。

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