理解並使用 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 元件。