理解和使用 React 的 useInsertionEffect Hook

介绍

React 的 useInsertionEffect 钩子是 useEffect 的专门版本，它保证其副作用将在同一组件中的任何其他效果之前运行。这对于 DOM 操作或依赖于执行前完全渲染 DOM 的第三方库集成特别有用。

何时使用 useInsertionEffect

DOM操作

当你需要在组件渲染后直接操作 DOM 时，例如设置焦点、滚动到特定元素或附加事件监听器。

第三方库

如果库要求 DOM 在调用其函数之前准备就绪，useInsertionEffect 可确保它在正确的时间执行。

布局效果

对于取决于组件布局的效果，例如测量元素尺寸或计算位置。

示例：将焦点设置在字段上

import { useRef, useInsertionEffect } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  useInsertionEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    

      
  );
}

在此示例中，useInsertionEffect 用于确保输入元素在渲染后立即获得焦点。这保证了用户可以立即开始输入。

示例：添加动态样式规则

import { useInsertionEffect } from 'react';

function MyComponent() {
  useInsertionEffect(() => {
    const style = document.createElement('style');
    style.textContent = `
      .my-custom-class {
        color: red;
        font-weight: bold;
      }
    `;
    document.head.appendChild(style);

    return () => {
      style.remove();
    };
  }, []);

  return (
    

      This text will have red and bold styles.
    
  );
}

在此示例中，useInsertionEffect 用于动态地将自定义样式规则添加到文档头，确保它们在组件中的任何其他效果之前应用。

需要记住的要点

• useInsertionEffect 与 useEffect 类似，但具有特定的时序保证。
• 它通常用于 DOM 操作或需要 DOM 准备好的第三方库集成。
• 明智地使用 useInsertionEffect 非常重要，因为过度使用可能会影响性能。
• 如果您需要在布局完成后同步运行效果，请考虑使用 useLayoutEffect。

结论

React 的 useInsertionEffect 钩子是一个强大的工具，可以确保在正确的时间执行副作用，特别是在处理 DOM 操作或第三方库时。通过了解其目的和用法，您可以创建更可靠、更高性能的 React 组件。