【React】React 18中的新功能 useInsertionEffect 是什么?
首先
在这篇文章中,我们将解释React 18的新功能useInsertionEffect,它只与开发CSS in JS的人有关。
「useInsertionEffect」是什么意思?
useInsertionEffect就像是在DOM被改变之前执行的useEffect。
注意事项:
useInsertionEffect 是为开发CSS in JS库的Hooks。它的使用场景是在应用CSS in JS样式的地方,所以在其他地方请使用 useEffect 或 useLayoutEffect !
useInsertionEffect 是为开发CSS in JS库的Hooks。它的使用场景是在应用CSS in JS样式的地方,所以在其他地方请使用 useEffect 或 useLayoutEffect !
使用方法
以下的例子是在修改DOM之前插入样式的调用示例。
// CSS-in-JS library
import { useInsertionEffect } from 'react';
function useCSS(rule) {
useInsertionEffect(() => {
// <style>...</style>を挿入する
});
return rule;
}
最好先执行useLayoutEffect。
useLayoutEffect是一个方便的Hooks,它在屏幕绘制之前执行,可以解决useEffect的闪烁问题。
在使用`useLayoutEffect`进行处理时,如果同时进行CSS in JS样式的插入,则在变更之前的样式下,`useLayoutEffect`的处理将会进行,并且不会按照所期望的方式进行处理。
因此,为了在更新后的样式中执行useLayoutEffect,最好使用useInsertionEffect来插入样式。
范例
在样本中,当按下按钮时,按钮的背景色会发生变化,然后我们会获取该背景色的值。
随后,将获取到的值反映到按钮的文字上。
梦想
这个样品是处于理想状态。
在样本的AdjacentStyle()中,它会改变背景颜色,并将已更改的样式插入到