React中Refs的卸载流程及代码空值校验必要性疑问

回调Ref的卸载执行逻辑 #

React对回调式Ref的执行规则是固定的：

• DOM元素首次挂载时，React调用回调Ref并传入该元素的引用；
• 当这个DOM元素被卸载（比如组件销毁、重渲染时元素被替换），React会再次调用该回调Ref，传入null；
• 若后续有新的同类型元素挂载，React会再次调用回调Ref传入新的DOM元素。

这么设计是为了让开发者能及时清理已卸载元素的引用，避免内存泄漏——如果一直持有已销毁元素的引用，浏览器垃圾回收机制无法回收这部分内存，长期会影响性能。

为什么必须加空值校验 #

看你的setElement方法：如果去掉if (element !== null)判断，当React传入null时，代码会直接执行this.formElements[element.name].element = element，此时element是null，访问null.name会直接抛出TypeError，导致程序崩溃。

对应你遇到的场景：切换复选框触发重渲染时，原输入框被销毁，React会先调用setElement(null)，如果没有空值判断，这一步就会报错；之后新输入框挂载，React才会调用setElement(新的input元素)，这时候执行赋值逻辑才安全。

额外说明 #

你可能会好奇“React为什么不跳过卸载时的回调”——这是因为React无法提前知道开发者是否需要在元素卸载时做清理操作（比如移除事件监听器、取消关联的定时器等），所以提供了这套统一的机制，让开发者自主处理挂载和卸载两个阶段的逻辑。

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