React中父组件卸载时，子元素是否先于父元素卸载？ref变化顺序？

示例代码 #

const ref_1 = useRef();
const ref_2 = useRef();
const ref_3 = useRef();

<div ref={ref_1}>
  <div ref={ref_2}>
    <div ref={ref_3}>

    </div>
  </div>
</div>

问题解答 #

1. React中子元素是否会在父元素之前被卸载？ #

是的，React元素的卸载顺序是从最内层子元素开始，逐层向外推进。嵌套结构里的子元素会先完成卸载流程，父元素才会启动自身的卸载操作。

2. 父div卸载时，三个ref的current属性变化顺序是怎样的？ #

不会同时变为不可用，而是遵循和卸载一致的逆嵌套顺序：

• 最先被置为null的是ref_3.current，对应最内层的子元素，它会第一个完成卸载
• 接着是ref_2.current，中间层元素卸载后，它的current值变为null
• 最后才是ref_1.current，最外层父元素完成卸载后，它的current值才会被设为null

这是因为React清理DOM元素时，会优先处理所有子节点的销毁逻辑，再处理父节点的对应逻辑，所以ref的current值会按这个顺序依次置空。

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture