流程
- react在diff之后，会进入commit阶段，将新生成的虚拟DOM发生的变化映射到真实DOM上
- 在commit的前期，会调度一些生命周期方法，对于类组件来说，会触发getSnapshotBeforeUpdate。对于函数组件来说，会调度useEffect。
- 但是并不是立即执行，在此阶段，会把useEffect入列到react维护的调度队列中，给一个普通的优先级，异步执行。
- 之后，在将新生成的虚拟DOM发生的变化映射到真实DOM上的过程中，会通过commitWalk根据不同的fiberNode进行DOM修改。
- 当commitWalk遇到类组件时，不会进行任何操作，因为没有真实的dom节点，直接return，处理下一个节点
- 但对于有了hooks的函数组件来说，会同步调用上一次渲染时useLayoutEffect函数的destroy方法
- 注意节点在commitWalk后，变化已经被映射到真实的DOM上了
- 但是由于JS线程和渲染线程是互斥的，真实的DOM虽然已经改变了，浏览器却没有立刻渲染到屏幕上
- 此时会同步执行对应的生命周期方法，如componentDidmount、componentDidUpdate以及useLayoutEffect的create方法。此时如果对DOM进行了操作，会一起处理
- 在react中，commit不会被打断，直至所有节点都commit结束，react更新完成，JS才停止执行
- 浏览器此时才会进入渲染线程，将发生变化的DOM渲染到屏幕上，因此react只用了一次回流、重绘的代价，将所有需要更新的DOM节点更新了
- 浏览器渲染完成后，react开始之前之前提到的调度队列，才开始执行useEffct产生的函数
一些结论
-
useEffect的create函数，调用时机和位置都与componentDidMount，componentDidUpdate 一致，且都是被 React 同步调用，都会阻塞浏览器渲染。
-
将对DOM的操作放在useLayoutEffect中，性能更好