useEffect 和 useLayoutEffect浅析
执行时期的区别
一 useEffect 回调函数的执行时期
useEffect为异步执行，执行时期为
- 触发状态更新（如：setState，forceUpdate）
- React渲染函数执行（render）
- 将更新渲染到页面上
- 执行useEffect回调函数
二 useLayoutEffect 回调函数的执行时期
- 触发更新
- React渲染函数执行
- 同步执行 useLayoutEffect回调函数 (如果此函数中存在 触发更新操作，如setState，会放弃本阶段的页面渲染，先执行更新然后再统一进行渲染)
- 将更新渲染到页面上
三 对比后得到两者区别
-
执行时期的区别，useEffect回调是在更新渲染到页面以后异步执行 而 useLayoutEffect是在更新渲染在页面前同步执行。造成的影响是，useLayoutEffect 回调中如果有耗时操作会阻塞页面的渲染，造成性能问题。
-
两者中如果调用setState更新状态，都会再次执行render，区别是 useEffect会进行两次页面更新渲染，useLayoutEffect只会执行最后一次页面更新渲染。所以，看到的结果是使用useEffect时候执行更新页面上会出现闪烁，而useLayoutEffect确不会
-
useLayoutEffect 的执行时期 同 class组件生命周期 componentDidMount 和 componentDidUpdate
所以，得出的结论是，大多数的场景中都应该使用useEffect来实现我们的逻辑，仅仅在一些特殊情况，比如需要去监听同步更新状态防止页面煽动时才需要useLayoutEffect。
