useEffect和useLayoutEffect

        今天写代码的时候，遇到了一个问题，该问题总结起来可以就是，一个函数组件中，有useLayoutEffect，有useEffect，useEffect中有卸载函数return，那么，在组件第一次加载的时候，useLayoutEffect、useEffect、useEffect.return的执行顺序是什么？组件更新的时候，执行顺序又是什么？

        要弄清楚这个问题，需要去查阅官方文档，我们看看官方文档怎么说。

useLayoutEffect：

1.它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。

2.useLayoutEffect 与 componentDidMount、componentDidUpdate 的调用阶段是一样的。        

由于 useLayoutEffect和componentDidMount的调用阶段是一样的，那么我们看看componentDidMount的调用阶段是什么：

componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用

因此， componentDidMount会在DOM树构建完毕后调用（此时在页面上没有任何显示，只是在内存中构建了DOM树），那么useLayoutEffect也是在DOM树构建完毕后调用，因此在页面显示之前，useLayoutEffect就已经执行完毕了。

那么，再来看看useEffect的执行时期：

赋值给 useEffect 的函数会在组件渲染到屏幕之后执行

因此，可以知道，在页面已经显示出该组件之后，才会执行 useEffect。

那么useEffect重的return函数什么时候执行呢？

为防止内存泄漏，清除函数会在组件卸载前执行。另外，如果组件多次渲染（通常如此），则在执行下一个 effect 之前，上一个 effect 就已被清除。

可以得到几个信息：

1.return在卸载组件和更新组件都会执行。

2.return在执行effect之前执行

因此，我们可以得出结论

组件第一次加载阶段：

1.先执行 useLayoutEffect

2.再执行useEffect

组件更新时：

1.先执行 useLayoutEffect

2.再执行useEffect.return

3.再执行useEffect

参考资料：react官方文档