ReactJS - useInsertionEffect 钩子

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

useInsertionEffect 钩子是一个自定义钩子，它允许我们在将组件的元素放入 DOM 树后立即运行代码。它的灵感来自 React 中的内置钩子，如 useEffect 和 useLayoutEffect。

语法

useInsertionEffect(setup, dependency)

参数

• setup- 这是我们可以放置代码的部分，这些代码告诉我们的React组件在最初被引入网页时做任何事情。
• dependency - 这类似于我们的设置代码所依赖的对象列表。它可能是来自我们组件外部的任何东西，例如信息、数据或我们在组件内生成的东西。

返回值

此钩子返回 undefined。

例子

示例 - 将CSS添加到textArea

该软件允许我们将 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） 尚未准备就绪。它们不会立即使用。
• 我们永远无法确定 usingInsertionEffect 何时会在网页更新时被激活。它可以在页面上发生更改之前或之后运行。

总结

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