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。