本文主要是介绍react Hooks之useLayoutEffect和useInsertionEffect，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
在介绍这两个hooks之前。让我们先对比一下useEffect、useLayoutEffect、useInsertionEffect
-
执行时机：
useEffect在组件渲染完成后执行，属于异步执行。useInsertionEffect在组件渲染并插入 DOM 后执行，也属于异步执行。useLayoutEffect在组件渲染完成后立即同步执行，并在浏览器布局和绘制之前运行。
-
对 DOM 元素的访问：
- 使用
useEffect时，无法直接访问具体的 DOM 元素。 - 使用
useInsertionEffect时，可以通过传递 ref 引用来获取对特定 DOM 元素的引用，并在回调函数中进行操作。 - 使用
useLayoutEffect时，也可以通过 ref 获取对 DOM 元素的引用，并在组件渲染完成后立即同步执行副作用操作。
- 使用
-
影响浏览器渲染的时机：
useEffect和useInsertionEffect的执行时机都是在浏览器渲染之后，不会阻塞页面的渲染过程。useLayoutEffect的执行是同步的，并且在浏览器布局和绘制之前运行，因此如果其中的副作用操作比较耗时，可能会阻塞浏览器的渲染过程，导致用户界面的卡顿
一、useLayoutEffect
1、作用：
它在组件完成渲染后同步执行副作用操作，并在浏览器布局和绘制之前运行。它与 useEffect 的使用方式类似，但在执行时机上有所不同。
具体来说，useLayoutEffect 的执行时机如下：
- 在组件渲染完成后立即执行。
- 在浏览器执行布局和绘制之前运行，以确保在浏览器更新屏幕之前执行副作用操作。
这意味着 useLayoutEffect 会在 DOM 更新之后、浏览器绘制之前同步执行，使得其副作用操作能够立即对 DOM 进行更改，而这些更改可能会影响到浏览器的布局和绘制。
2、注意事项
由于 useLayoutEffect 的执行是同步的，如果其中的副作用操作比较耗时，会阻塞浏览器的渲染过程，导致用户界面的卡顿。因此，在使用 useLayoutEffect 时，应该谨慎处理副作用操作的性能问题。
3、用法：同useEffect类似，一个回调函数，一个依赖项。
4、示例
import { useLayoutEffect, useRef } from 'react';function Example() {const ref = useRef(null);const [count, setCount] = useState(0);useLayoutEffect(() => {console.log('useLayoutEffect - Component rendered:', ref.current);ref.current.style.backgroundColor = 'red';return () => {console.log('useLayoutEffect cleanup');};}, [count]);return (<div><div ref={ref}>Hello World</div><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}
在这个例子中，我们创建了一个 ref 引用，用于访问 DOM 元素。在 useLayoutEffect 的回调函数中，我们可以通过 ref.current 获取到对应的 <div> 元素，并设置其背景颜色为红色。此外，我们还在 deps 参数中传递了 count 状态，表示只有当 count 发生变化时才执行副作用操作。
二、useInsertionEffect
1、作用
它用于在组件渲染并插入 DOM 后执行副作用操作。与 useEffect 和 useLayoutEffect 不同，useInsertionEffect 的回调函数会在浏览器完成对 DOM 元素的插入操作后才运行。
2、用法
和useEffect类似，不具体说明
3、注意事项：
由于 useInsertionEffect 的回调函数是在浏览器完成对 DOM 元素的插入操作后才运行，因此可以在其中直接访问具体的 DOM 元素。这与 useEffect 和 useLayoutEffect 不同，它们无法直接访问具体的 DOM 元素。因此，在处理需要访问具体 DOM 元素的副作用操作时，可以优先考虑使用 useInsertionEffect。
4、示例：
import { useInsertionEffect, useRef } from 'react';function Example() {const ref = useRef(null);const [count, setCount] = useState(0);useInsertionEffect(() => {console.log('useInsertionEffect - Component inserted:', ref.current);ref.current.style.backgroundColor = 'red';return () => {console.log('useInsertionEffect cleanup');};}, [count]);return (<div><button onClick={() => setCount(count + 1)}>Click me</button><div ref={ref}>Hello World</div></div>);
}在这个例子中，我们创建了一个 ref 引用，用于访问 DOM 元素。在 useInsertionEffect 的回调函数中，我们可以通过 ref.current 获取到对应的 <div> 元素，并设置其背景颜色为红色。此外，我们还在 deps 参数中传递了 count 状态，表示只有当 count 发生变化时才执行副作用操作。
这篇关于react Hooks之useLayoutEffect和useInsertionEffect的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
