useEffect和useLayoutEffect的区别

这两者的区别可以用2句话概括：

1. useLayoutEffect和平常写的ClassComponent的'componentDidMount'和'componentDidUpdate'同时执行。
2. useEffect会在本次更新完成后，也就是第1点的方法执行完成后，在开启一次任务调度，在下次任务调度中执行useEffect。

查看源码可以发现useLayoutEffect和componentDidMount和componentDidUpdate是同时执行的。

而useEffect的执行阶段是在本次更新完成后，再开启一个任务调度，在下次任务调度中执行，如下所示：

因为useLayoutEffect中的代码可能会导致代码长时间执行，导致页面无法渲染从而卡顿。所以一般情况下，我们会把初始化请求放在useEffect中，这样保证不会影响本次页面的渲染，性能更高一些。