hooks之 useEffect和useLayoutEffect的区别

2024-01-29 06:34:17

hooks之useEffect和useLayoutEffect的区别

react hook面世已经有一段时间了，相信很多人都已经在代码中用上了hooks。而对于useEffect和useLayoutEffect，我们使用的最多的应该就是useEffect。那他们两个到底有什么不一样的地方？

这两个函数的使用方式其实非常简单，他们都接受一个函数作为参数，这个函数将会在组件渲染之后执行。但是，他们之间有一个很重要的区别：

useEffect会在浏览器渲染完成之后执行。而useLayoutEffect会在浏览器渲染之前执行。

这是因为useEffect是在浏览器渲染完成之后执行的，所以它可以访问到更新后的DOM元素。而useLayoutEffect是在浏览器渲染之前执行的，所以它无法访问到更新后的DOM元素。

举个例子，如果你想在组件渲染之后改变组件的样式，那么你应该使用useEffect。而如果你想在组件渲染之前改变组件的样式，那么你应该使用useLayoutEffect。

另外，useEffect和useLayoutEffect还有一个区别是：

useEffect可以返回一个函数，这个函数将在组件销毁之前执行。而useLayoutEffect不能返回函数。

这主要是为了防止组件在销毁之前执行一些不必要的操作。比如说，如果你想在组件销毁之前取消一个网络请求，那么你应该在useEffect中返回一个函数来取消这个网络请求。

useEffect和useLayoutEffect的使用场景

useEffect和useLayoutEffect的使用场景有很多，这里列举一些常见的场景：

useEffect ：
- 在组件渲染之后执行一些操作，比如：
  - 获取数据
  - 设置定时器
  - 更新DOM元素
- 在组件销毁之前执行一些操作，比如：
  - 取消网络请求
  - 清除定时器
  - 移除DOM元素监听器
useLayoutEffect ：
- 在组件渲染之前执行一些操作，比如：
  - 设置组件的样式
  - 更新组件的布局
  - 创建DOM元素

在使用useEffect和useLayoutEffect时，需要注意以下几点：

尽量避免在useEffect和useLayoutEffect中执行耗时操作，因为这可能会导致浏览器卡顿。
如果useEffect和useLayoutEffect中需要执行耗时操作，那么应该使用异步的方式来执行，比如：
- 使用setTimeout()
- 使用requestAnimationFrame()
尽量避免在useEffect和useLayoutEffect中执行网络请求，因为这可能会导致组件重新渲染。
如果useEffect和useLayoutEffect中需要执行网络请求，那么应该使用useMemo()来缓存网络请求的结果，以避免组件重新渲染。