精读React hooks（十一）：useInsertionEffect——CSS-in-JS样式注入新方式

🧑‍💻

推荐全栈学习资源：

Next.js 中文文档：样式和官网一样的中文文档，创造沉浸式Next.js中文学习体验。

《Chrome插件全栈开发》：真实出海项目的实战教学课，讲解Chrome插件和Next.js端的全栈开发，帮助你半个月内成为全栈出海工程师。

React发展至今，已经不局限于前端开发框架的定位，它已经逐渐发展成框架的框架。为什么这么说呢？因为React这几年推出了很多服务于上层框架的API，这类API普通开发者一般不需要关注。在React hooks里，useInsertionEffect就是这样的定位——useInsertionEffect是为CSS-in-JS库提供的一个hook，它让后者可以更合理地注入样式，普通开发者可以不用关注useInsertionEffect。

`useInsertionEffect`能为CSS-in-JS带来什么？

在useInsertionEffect出现以前，无论是使用useEffect注入还是useLayoutEffect注入，都存在重复计算和性能浪费的问题，而像styled-components使用babel插件则又显得不够灵活。

为了弥补这些主流方案的不足，React用useInsertionEffect给CSS-in-JS库作者多一个选择，useInsertionEffect有这样的优点：

动态性：允许在运行时动态地注入样式，这使得基于组件的状态、道具或上下文的样式变化变得容易。
及时注入：保证了在任何布局效果触发之前插入样式，减少了样式的重复计算和布局抖动。

总结来说，再高度动态样式的应用中，useInsertionEffect的表现会比其它方案更优秀。

`useInsertionEffect`基本使用

这是基础用法的定义：

useInsertionEffect(setup, dependencies?)

在setup方法里可以做我们需要的处理，dependencies则是依赖数组，和useEffect、useLayoutEffect的依赖数组规则一样。

现在来看个详细的用法示例：

import { useInsertionEffect } from 'react';
 
function useDynamicStyle(styleObj) {
  const cssString = convertStyleObjToCSS(styleObj); // 将样式对象转换为 CSS 字符串的辅助函数
 
  useInsertionEffect(() => {
    const styleElement = document.createElement('style');
    styleElement.innerHTML = cssString;
    document.head.appendChild(styleElement);
    return () => {
      document.head.removeChild(styleElement);
    };
  }, [cssString]);
}

在useInsertionEffect里面，我们可以动态注入<style>。

注意事项

useInsertionEffect只在客户端运行，不能在服务器渲染期间运行。
不能从useInsertionEffect中更新状态。这是因为useInsertionEffect专为插入操作设计的，而不是为响应式状态变化设计的。如果在useInsertionEffect里更新状态，会造成组件重新渲染。
当useInsertionEffect运行时，refs还没有附加。如果你试图在useInsertionEffect中访问ref，你可能会得到null或未定义的值。
useInsertionEffect可能在DOM更新之前或之后运行，所以不能依赖于DOM在特定时刻的更新状态。这是因为useInsertionEffect的设计初衷是在任何布局效果触发之前插入元素，但它并不保证在 DOM 的任何特定更新之前或之后运行。因此，依赖于DOM在特定时刻的状态可能导致不可预测的行为。例如：假设你希望在useInsertionEffect中检查某个元素的尺寸。但由于 DOM 可能尚未更新，所以你得到的尺寸可能是旧的或不准确的。