你不知道的React系列（二十七）useInsertionEffect

本文正在参加「金石计划」

useInsertionEffect(setup, dependencies?)

• DOM 改变之前注入 styles

• setup 和 Effect逻辑一样

• 组件挂载 DOm 之前会运行

• 客户端运行

• 不能更新 state

• refs 还没有连接，DOM 还没有更新

css-in-js 类库使用

• 使用编译器提取到 CSS 文件里面

• 内敛 style

• 运行时注入 style

  推荐结合第一种方法和第二种方法

  运行时注入 style 强制浏览器重新计算 style

  运行时注入 style 在生命周期里面有可能会很慢

  // Inside your CSS-in-JS library
  let isInserted = new Set();
  function useCSS(rule) {
    useInsertionEffect(() => {
      // As explained earlier, we don't recommend runtime injection of <style> tags.
      // But if you have to do it, then it's important to do in useInsertionEffect.
      if (!isInserted.has(rule)) {
        isInserted.add(rule);
        document.head.appendChild(getStyleForRule(rule));
      }
    });
    return rule;
  }
  
  function Button() {
    const className = useCSS('...');
    return <div className={className} />;
  }
  

useInsertionEffect 和 useLayoutEffect

渲染期间注入 style， 浏览器每帧计算 style

Effect 计算会出错因为外部的 style