React 16.8+是否先清理已渲染组件的effect再执行新实例的effect？

结论 #

是，所有 React 16.8+ 版本都严格遵循这个执行顺序，和组件在渲染树中的位置、初始状态完全无关。

执行逻辑说明 #

React的更新流程在commit阶段有固定的执行优先级：

• 首先处理所有需要卸载的组件：所有要卸载的实例的useEffect清理函数，会在DOM变更完成前统一执行完毕
• 所有旧实例的清理逻辑全部跑完后，才会执行本次更新中新挂载/更新组件的useEffect回调

你给出的互斥渲染场景下，两个MyComp属于完全独立的两个实例，每次状态切换时：

1. React 会先标记要卸载的旧实例，执行它的清理逻辑打印[2]
2. 再处理新实例的挂载，等整个DOM更新、浏览器绘制完成后，执行新实例的effect打印[1]

验证场景 #

不管你怎么调整两个MyComp在JSX中的书写顺序，或是修改showFirstInstance的初始值，执行顺序都不会变：比如初始值为true时，首次渲染打印[1] run effect for instance with value 1，切换状态后先打印[2] do effect clean up for instance with value 1，再打印[1] run effect for instance with value 2。

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