路由切换时，组件A的卸载清理回调是否必然先于组件B挂载回调执行？

组件代码 #

组件A #

function A({}) {
  
  useEffect(() => {
   // do stuff  

   return () => cleanup_callback_of_A();
  }, [])

  return <div />
}

组件B #

function B({}) {
  
  useEffect(() => {
   mounting_callback_of_B();
  }, [])

  return <div />
}

问题 #

当用户从路径/A导航至路径/B时（组件A对应路径/A，组件B对应路径/B），是否可以保证cleanup_callback_of_A一定会在mounting_callback_of_B之前执行？

可以保证这个执行顺序。

React在处理路由切换引发的组件卸载与挂载时，会严格遵循固定流程：

1. 先完成旧组件（A）的卸载流程，触发其useEffect的清理函数cleanup_callback_of_A执行；
2. 旧组件卸载完成后，才会启动新组件（B）的挂载流程，执行其useEffect的回调mounting_callback_of_B。

这个顺序是React内部更新机制的既定规则，不会出现新组件先挂载、旧组件后清理的情况。

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