一、useLayoutEffect和useEffect的区别
对于 useEffect 和 useLayoutEffect,我们使用的最多的应该就是useEffect。那他们两个到底有什么不一样的地方?
使用方式
这两个函数的使用方式其实非常简单,他们都接受一个函数一个数组,只有在数组里面的值改变的情况下才会再次执行 effect。
差异
useEffect 是异步执行的,而useLayoutEffect是同步执行的。
useEffect 的执行时机是在渲染函数执行完成,并在浏览器完成绘制之后,再异步执行,而 useLayoutEffect 会在 DOM 更新之后,浏览器绘制之前同步执行。
为什么在 useEffect 中会出现 DOM 没有被更新的情况?
主要有如下几个原因:
1、如果在 useEffect 中访问了 DOM 元素,但是在组件更新之后没有重新渲染,那么 useEffect 中的回调函数就不会被执行。这种情况下,useEffect 中的回调函数就不会访问到最新的 DOM 元素。
2、在某些情况下,React 可能会进行优化,跳过对某些 DOM 元素的更新。这可能会导致在 useEffect 中访问这些元素时,它们仍然处于旧的状态。
根据 React 官方文档,这个 hook 的一个主要缺陷是它会损害应用程序的性能。
不支持服务器端渲染 (SSR):由于 SSR 需要异步呈现以避免阻塞服务器线程,因此在 SSR 设置中使用 useLayoutEffect 可能会导致服务器渲染的内容和客户端渲染的内容不匹配。
获取数据和执行网络请求,订阅事件,执行清理定时器操作
useLayoutEffect 仅在需要同步执行和快速访问 DOM 的情况下使用,例如,添加平滑滚动, 动画元素,自动对焦输入框
useLayoutEffect hook 用于向容器元