【React】useLayoutEffect、useInsertionEffect

useLayoutEffect

useLayoutEffect和useEffect有什么区别呢？

useEffect的cb，准确来说，是异步调用的，会等主线程任务执行完成，D0M更新，JS执行完成，视图绘制完成，才执行。

useLayoutEffect的cb，是同步执行的，执行时机是DOM更新之后，视图绘制完成之前，这个时间可以更方便的修改 DOM。

如果要改 DOM， 用useLayoutEffect， 其他都用useEffect 。

useInsertionEffect

useInsertionEffect比useLayoutEffect更早。useInsertionEffect 执行时，DOM还没有更新。

本质上useInsertionEffect主要是解决 css-in-js 在渲染中注入样式的性能问题。

哪个和componentDidMount、componentDidUpdate更类似

componentDidMount、componentDidUpdate是同步的，所以useLayoutEffect更类似。