Hooks 的秘密武器：useEffect、useLayoutEffect 和 useInsertionEffect
2023-08-01 08:53:05
在 React 中驾驭 Hooks 三剑客：useEffect、useLayoutEffect 和 useInsertionEffect
在 React 的浩瀚世界中，Hooks 犹如璀璨的明星，闪耀着夺目的光芒。它们以一种革新性的方式，让我们构建组件变得更加简洁、易懂。而在这颗璀璨群星中，useEffect、useLayoutEffect 和 useInsertionEffect 无疑是熠熠生辉的三颗明珠，为 React 开发者带来了强大的赋能。
useEffect：组件生命周期的守护神
useEffect，就像一位勤恳的守卫者，守卫着组件的生命周期，让我们能够在关键时刻执行副作用操作。这些操作可以是首次挂载时的网络请求、组件卸载时的资源清理，甚至是定时器的设置。
useEffect(() => {
// 在组件挂载时获取数据
const data = fetchData();
}, []);
useEffect(() => {
// 在组件卸载时清理资源
return () => {
cleanupResources();
};
}, []);
useLayoutEffect：与浏览器绘制同步的副作用操作
useLayoutEffect 与 useEffect 有着异曲同工之妙，但又有着微妙的区别。它最大的特点在于，会在浏览器绘制 DOM 之后执行，而不是绘制之前。这使得它非常适合处理那些与 DOM 相关的副作用操作，比如更新元素样式、调整布局等。
useLayoutEffect(() => {
// 在浏览器绘制 DOM 后更新元素样式
element.style.color = "red";
}, []);
useLayoutEffect(() => {
// 在浏览器绘制 DOM 后调整布局
element.style.position = "absolute";
}, []);
useInsertionEffect：一次性的初始化操作
useInsertionEffect 顾名思义，是专为组件首次挂载时而生的 Hook。它只会在组件生命周期的这一时刻执行一次，非常适合进行一次性的初始化操作，比如设置事件监听器、测量元素尺寸等。
useInsertionEffect(() => {
// 在组件首次挂载时设置事件监听器
element.addEventListener("click", handleClick);
}, []);
useInsertionEffect(() => {
// 在组件首次挂载时测量元素尺寸
const width = element.clientWidth;
}, []);
总结：三剑合璧，赋能 React 开发
useEffect、useLayoutEffect 和 useInsertionEffect 犹如 React 开发的“三剑客”，携手合作，为我们提供了在不同场景下执行副作用操作的强大能力。掌握它们的用法，可以让我们的 React 组件变得更加灵活、强大。
常见问题解答
-
useEffect 和 useLayoutEffect 有什么区别？
useEffect 会在浏览器绘制之前执行，而 useLayoutEffect 会在浏览器绘制之后执行，适合处理与 DOM 相关的操作。 -
useInsertionEffect 是做什么用的？
useInsertionEffect 只会在组件首次挂载时执行一次，适合进行一次性的初始化操作。 -
可以使用 useInsertionEffect 代替 useEffect 吗？
不建议使用 useInsertionEffect 代替 useEffect，因为它们具有不同的执行时机和适用场景。 -
useEffect 的第二个参数有什么作用？
useEffect 的第二个参数是一个依赖项数组，当其中某个依赖项发生变化时，useEffect 就会重新执行。 -
useLayoutEffect 有性能问题吗？
过多的 useLayoutEffect 可能导致性能问题，因为它会在浏览器绘制 DOM 后执行，会阻塞主线程。
