ReactJS - useInsertionEffect 鉤子

---

---

‘useInsertionEffect’ 鉤子是在 React JS 的第 18 個版本中引入的。useInsertionEffect 鉤子提供了一種新的、使用者友好的方法來管理 DOM 插入操作。開發人員可以使用 useInsertionEffect 在元素被放置到 DOM 中後立即執行操作。

useInsertionEffect 鉤子是一個自定義鉤子，它允許我們在元件的元素被放置到 DOM 樹中後立即執行程式碼。它受到 React 中內建鉤子的啟發，例如 useEffect 和 useLayoutEffect。

語法

useInsertionEffect(setup, dependency)

引數

• 設定 - 這是我們可以放置程式碼的部分，這些程式碼告訴我們的 React 元件在最初引入網頁時執行任何操作。

• 可選依賴項 - 這類似於我們的設定程式碼所依賴的物件列表。它可能是來自我們元件外部的任何內容，例如資訊、資料或我們在元件內部生成的內容。

返回值

此鉤子返回 undefined。

示例

示例 - 向 textArea 新增 CSS

此軟體允許我們將 CSS 程式碼輸入到一個 textarea 中，並檢視它在 div 元素上的外觀。在 div 元素被放置到 DOM 中後，useInsertionEffect 鉤子用於將 CSS 程式碼插入到文件的頭部。這保證了 CSS 程式碼在執行任何其他佈局效果之前應用。

import React, { useState, useRef, useInsertionEffect } from 'react';

const App = () => {
   const [styleText, setStyleText] = useState('');
   const styleRef = useRef(null);
   
   useInsertionEffect(() => {
      const styleElement = document.createElement('style');
      styleElement.textContent = styleText;
      document.head.appendChild(styleElement);
      
      return () => {
         document.head.removeChild(styleElement);
      };
   }, [styleText]);
   
   return (
      <div>
         <textarea
            value={styleText}
            onChange={(event) => setStyleText(event.target.value)}
         />
         <div ref={styleRef} />
      </div>
   );
};

export default App;

輸出

示例 - 動態進度條應用

這是另一個在 React 中使用 useInsertionEffect 鉤子的應用示例，它展示了其用於建立動態進度條的用法。此應用允許我們調整範圍輸入，並且輸入的值將反映在動態進度條中。useInsertionEffect 鉤子用於在進度狀態變數更改時更新進度條的寬度。

import React, { useState, useRef, useEffect } from 'react';

const App = () => {
   const [progress, setProgress] = useState(0);
   const progressBarRef = useRef(null);
   
   useEffect(() => {
      const progressBarElement = progressBarRef.current;
      progressBarElement.style.width = `${progress}%`;
   }, [progress]);
   
   return (
      <div>
         <input type="range" min="0" max="100" value={progress} onChange={(event) => setProgress(event.target.value)} />
         <div ref={progressBarRef} style={{ height: 20, backgroundColor: '#ccc' }}>
            <div style={{ height: '100%', width: `${progress}%`, backgroundColor: '#007bff' }}></div>
         </div>
      </div>
   );
};

export default App;

輸出

示例

因此，我們可以透過使用 CSS-in-JS 庫注入動態樣式來使用 ‘useInsertionEffect’ 鉤子。因此，我們將藉助一個簡短的應用程式詳細討論這一點。

過去，React 元件使用基本的 CSS 進行樣式設定。

// In the Javascript file:
<button className="login" />

// In the CSS file:
.login { color: green; }

簡單來說，CSS-in-JS 是一種為 JavaScript 元件設定樣式的方法。雖然首選靜態和內聯樣式，但在執行時插入樣式可能會導致我們的程式速度變慢。在 React 中，useInsertionEffect 鉤子管理何時新增這些樣式，使我們的應用更易於使用。

import React from 'react';
import { useInsertionEffect } from 'react'; // import here the useInsertedEffect hook
let isInserted = new Set();

function useCSS(rule) {
   useInsertionEffect(() => {
      if (!isInserted.has(rule)) {
         isInserted.add(rule);
         const style = document.createElement('style');
         style.innerHTML = rule;
         document.head.appendChild(style);
      }
   });
}

function ColoredBox() {
   useCSS('.colored-box { background-color: lightgreen; }');

   return <div className="colored-box">I have a colored background.</div>;
}

function App() {
   return (
      <div>
         <ColoredBox />
      </div>
   );
}
export default App;

輸出

在上面的示例中，我們有一個 ColoredBox 元件，它使用 useCSS 自定義鉤子動態地放置一個更改背景顏色的 CSS 規則。useInsertionEffect 鉤子確保 CSS 規則在佈局效果之前出現。

限制

• 效果（如 useInsertionEffect 中使用的效果）僅適用於我們瀏覽器中顯示的網頁。當網頁在伺服器上建立並傳輸到我們的瀏覽器之前，它們不會執行。

• 我們無法在 useInsertionEffect 中修改元件使用的任何資料或資訊。

• 當執行 useInsertionEffect 鉤子時，特殊引用 (refs) 尚未準備好。它們不會立即使用。

• 在網頁更新時，我們永遠無法確定使用InsertionEffect 何時被啟用。它可能在頁面上的內容更改之前或之後執行。

總結

React 應用中的 useInsertionEffect 鉤子提供了一種強大且簡單的方法來管理 DOM 插入操作。透過在元素新增到 DOM 後立即執行程式碼，我們可以執行 DOM 修改、動畫、初始化和清理活動。瞭解其設定、限制和現實世界中的最佳實踐將使我們能夠正確利用 useInsertionEffect 並改善 React 元件的功能和使用者體驗。