第39节——useInsertionEffect——了解

一、回顾css in js

CSS-in-JS （后文简称为 CIJ）在 2014 年由 Facebook 的员工 在 NationJS 会议上提出：可以借用 JS 解决许多 CSS 本身的一些“缺陷”，比如全局作用域、死代码移除、生效顺序依赖于样式加载顺序、常量共享等等问题。

CSS IN JS 的具体实现有 50 多种，比如：React常用（CSS Modules、styled-components）、 Vue常用（

二、useInsertionEffect

这个钩子与其他钩子略有不同，因为它的唯一目的是对CSS-in-JS库很重要，这些库在运行中生成新的规则并在文档中插入

在某些情况下，

这实际上意味着CSS规则必须在React渲染时针对每一帧的所有DOM节点进行重新计算。虽然你很有可能不会遇到这个问题，但它的扩展性并不好。

为了解决这个问题，React团队引入了useInsertionEffect Hook。它与useLayoutEffect Hook非常相似，但它不能访问DOM节点的引用。

这意味着它只能用于插入样式规则。它的主要用途是插入全局DOM节点，如

import { useLayoutEffect } from "react";
import { useEffect, useInsertionEffect, useRef } from "react";
function getStyleForRule(rule) {
  let style = document.createElement("style");
  style.innerHTML = rule;
  return style;
}

function useCSS(rule) {
  useInsertionEffect(() => {
    console.log("每次渲染前")
    // 插入style标签
    document.head.appendChild(getStyleForRule(rule));
  });
  return rule;
}

export default function Component() {
  useLayoutEffect(() => {
    console.log("每次渲染后的同步班")
  })
  useEffect(() => {
    console.log("每次渲染后")
  })
  let className = useCSS(`.red{
    background-color:red;
}`);
  return <div className={"red"}>哈哈哈</div>;
}