React重渲染时旧Ref清除机制及相关疑问解析

正如React文档所述：如果ref回调定义为内联函数，更新期间会被调用两次，先传入null，再传入DOM元素。这是因为每次渲染都会创建新的函数实例，React需要清除旧ref并设置新的。

针对你的两个疑问，解答如下：

1. 为什么React必须先调用旧ref回调传入null，而非直接调用新回调传入新DOM节点？ #

• 保障资源清理时机：不少开发者会在ref回调里给DOM节点绑定事件监听、初始化第三方库实例。如果直接替换ref而不先触发旧回调传入null，开发者就没有机会在旧DOM节点被销毁前解绑监听、销毁第三方实例，这会引发内存泄漏或残留的异常逻辑。传入null的调用，本质是给开发者明确信号：旧DOM节点即将被替换/销毁，需执行收尾清理操作。
• 维持ref的一致性：React更新流程中，旧DOM节点和新DOM节点会短暂共存（比如DOM diff完成前）。先清除旧ref能确保开发者持有的ref不会同时指向新旧两个节点，避免出现操作已标记为待销毁的旧节点这类逻辑混乱。
• 同步内部状态：React内部会跟踪每个ref的关联关系，当ref回调函数实例变化时，必须先通过调用旧回调传入null，解除旧函数与旧DOM节点的绑定，再建立新函数与新节点的关联，确保内部状态和开发者侧的ref引用保持一致。

2. React是如何清除旧ref的？这和两次调用ref回调有关吗？ #

React清除旧ref的核心动作就是调用旧的ref回调函数并传入null，这和两次调用直接相关：

• 组件更新时，React检测到当前渲染的ref回调是新的函数实例（内联函数每次渲染都会重建），就会调用之前存储的旧回调并传入null——这一步就是通知开发者“旧DOM节点不再被引用，请清理相关资源并释放引用”。
• 当新DOM节点创建/更新完成后，React再调用新的ref回调函数，传入新DOM节点，完成新ref的绑定。
• 从内存回收角度，开发者在旧回调中把之前保存的DOM节点引用设为null后，旧节点失去所有有效引用，垃圾回收器就能正常回收它占用的内存。

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