认识

2023年02月22日

柏拉文

越努力，越幸运

一、认识

useLayoutEffect 可以让你在函数中使用副作用,执行时机在DOM更新之后,浏览器绘制之前。useLayoutEffect 和 useEffect 不同的地方是采用了同步执行,所以 useLayoutEffect callback 中代码执行会阻塞浏览器绘制。

对于不同的 effect 钩子, 父子组件的执行顺序是: 先子后父。

useLayoutEffect(() => { doSomething },[a,b]);

第一个参数: 初始渲染之前触发 doSomething; 组件重新渲染之前根据 [a,b] 决定是否触发 doSomething 副作用。（注意副作用是在渲染完成之前执行）
- doSomething 返回函数:组件销毁时触发 doSomething 返回函数; 组件重新渲染后根据 [a,b] 决定是否触发 doSomething 返回函数，这时候先执行 doSomething 返回函数，后执行 doSomething 副作用。
[a,b]:
- 如果为 [a,b] ,只有 a,b 更新引起的组件重新渲染之前才会重新调用 doSomething ，以及 doSomething 返回函数
- 如果为 [] , 无论组件是否重新渲染，都不会重新调用 doSomething , 以及 doSomething 返回函数
- 如果没有[a,b] 或者 [] 时，组件每次重新渲染都会调用 doSomething 包括 doSomething 的返回函数

useLayoutEffect: 初始渲染或者状态更新之后, 在 commit 阶段中同步执行, 所以 useLayoutEffect callback 中代码执行会阻塞浏览器绘制。 useLayoutEffect 是在 DOM 更新之后，浏览器绘制之前，这样可以方便修改 DOM，获取 DOM 信息，这样浏览器只会绘制一次。修改 DOM ，改变布局就用 useLayoutEffect
useEffect: 初始渲染或者状态更新之后, 在 commit 阶段完成以后异步执行,所以 effect 回调函数不会阻塞浏览器绘制视图。useEffect 执行是在浏览器绘制视图之后,如果修改 DOM 布局放在 useEffect ，那 useEffect 执行是在浏览器绘制视图之后，接下来又改 DOM ，就可能会导致浏览器再次回流和重绘。而且由于两次绘制，视图上可能会造成闪现突兀的效果。除修改 DOM ，改变布局的场景外,其他情况都用 useEffect