react钩子函数总结汇总

任磊abc

已于 2024-05-24 09:51:04 修改

阅读量395

点赞数 5

分类专栏： react 文章标签： react.js 前端 javascript

于 2024-04-02 17:32:02 首次发布

本文链接：https://blog.csdn.net/sinat_36728518/article/details/137151480

版权

react 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文详细比较了React中的useEffect和useLayoutEffect，强调了它们在执行时机、性能影响以及在特定场景（如平滑滚动和服务器渲染）的应用。通常情况下，useEffect更适用，除非需要同步DOM操作以避免视觉闪烁。

摘要由CSDN通过智能技术生成

一、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 用于向容器元素添加平滑滚动功能。设置事件侦听器以侦听窗口对象上的滚动事件并调用 handlescroll 函数。该函数将使用带有 { top: 0, behavior: 'smooth' } 作为参数的 scrollTo 方法将容器平滑地滚动到顶部。useLayoutEffect 将在挂载组件时执行初始滚动到顶部。添加了清理功能以在卸载组件时删除事件侦听器。

使用 useLayoutEffect 的好处
1.它确保布局在整个过程中非常一致，并且在用户看到之前是稳定的。
2.它通过将状态更改与 DOM 更改同步来帮助防止不必要的重新渲染或重新绘制。
「防止闪烁或不需要的内容闪烁」：在某些情况下，使用 useLayoutEffect 可以帮助消除当元素需要根据布局信息重新定位或设置样式时可能发生的视觉闪烁或布局偏移。通过在浏览器绘制之前同步执行适当的布局更改，你可以防止在使用 useEffect 并且在布局更改和渲染之间有延迟时可能出现的视觉故障。

请记住，尽管useLayoutEffect钩子为我们提供了很多有用的东西，但在99%的情况下，你最好还是使用useEffect钩子，因为它由于其异步的性质，常常会有更高的性能