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 组件的功能和用户体验。