ReactJS - useInsertionEffect Hook

"useInsertionEffect" Hook 是在 React JS 的第 18 版中引入的。useInsertionEffect Hook 提供了一种新的、用户友好的方法来管理 DOM 插入操作。开发人员可以使用 useInsertionEffect 在元素放入 DOM 后立即执行操作。

useInsertionEffect Hook 是一个自定义 Hook ，它允许我们在组件的元素放入 DOM 树后立即运行代码。它受到 React 中内置 Hook 的启发，例如 useEffect 和 useLayoutEffect。

语法

useInsertionEffect(setup, dependency)

参数

• Setup − 这是我们可以放置代码的部分，该代码告诉我们的 React 组件在最初引入网页时执行任何操作。

• 可选依赖项 − 这类似于我们的设置代码所依赖的对象列表。它可能是来自我们组件外部的任何内容，例如信息、数据或我们在组件内生成的内容。

返回值

此 Hook 返回未定义。

示例

示例 − 将 CSS 添加到 textArea

此软件允许我们将 CSS 代码输入到 textarea 中并查看它在 div 元素上的外观。将 div 元素放入 DOM 后，useInsertionEffect Hook 用于将 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 Hook 的应用示例，展示了其用于创建动态进度条的用法。此应用允许我们调整范围输入，输入的值将反映在动态进度条中。每当进度状态变量发生变化时，useInsertionEffect Hook 用于更新进度条的宽度。

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" Hook 注入动态样式。因此，我们将借助一个简短的应用程序详细讨论这一点。

过去，React 组件使用基本 CSS 进行样式设置。

// 在 Javascript 文件中:
<button className="login" />

// 在 CSS 文件中:
.login { color: green; }

简单来说，CSS-in-JS 是一种设置 JavaScript 组件样式的方法。虽然静态和内联样式是首选，但在运行时插入样式可能会导致我们的程序变慢。在 React 中，useInsertionEffect Hook 管理何时添加这些样式，使我们的应用程序更易于使用。

import React from 'react';
import { useInsertionEffect } from 'react'; // 在此处导入 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 自定义 Hook 来动态放置更改背景颜色的 CSS 规则。 useInsertionEffect Hook 确保 CSS 规则位于布局效果之前。

限制

• 效果(如与 useInsertionEffect 一起使用的效果)仅适用于浏览器中显示的网页。 在网页实际在服务器上创建并传输到我们的浏览器之前，它们不会执行。

• 我们无法在 useInsertionEffect 中修改组件使用的数据或信息。

• 执行 useInsertionEffect Hook 时，特殊引用 (refs) 尚未准备好。它们不会立即使用。

• 我们永远无法确定网页更新时何时会激活 usingInsertionEffect。它可以在页面上的内容发生变化之前或之后运行。

摘要

React 应用程序中的 useInsertionEffect Hook 提供了一种强大且简单的方法来管理 DOM 插入操作。我们可以在将元素添加到 DOM 后立即运行代码来执行 DOM 修改、动画、初始化和清理活动。了解其设置、限制和现实世界的最佳实践将使我们能够正确利用 useInsertionEffect 并改善 React 组件的功能和用户体验。

reactjs_reference_api.html