React 怎么用 useInsertionEffect 注入 CSS-in-JS 样式？

Question

仓乃文 · Accepted Answer

CSS-in-JS 库在运行时注入样式时，如果用 useEffect 会导致样式闪烁（FOUC）。useInsertionEffect 在 DOM 变更后、浏览器绘制前同步执行，确保样式在绘制前注入，避免闪烁。 useInsertionEffect 用法： ```javascript function useCSS(rule) { useInsertionEffect(() => { const style = document.createElement("style"); style.textContent = rule; // 在绘制前注入样式 document.head.appendChild(style); return () => style.remove(); // 清理时移除 }, [rule]); } function Button({ color }) { useCSS(`.btn { background: ${color}; }`); return ; } ``` 与 useEffect/useLayoutEffect 的执行顺序： ```javascript // 1. React 更新 DOM // 2. useInsertionEffect 同步执行（注入样式，不能读取 DOM） // 3. useLayoutEffect 同步执行（可以读取 DOM 布局） // 4. 浏览器绘制屏幕 // 5. useEffect 异步执行 ``` 补充说明： - useInsertionEffect 不能读取或修改 DOM，只能插入样式，否则会有性能问题 - 这个 Hook 主要是给 CSS-in-JS 库（如 styled-components、emotion）用的 - 普通开发者几乎不需要直接使用，用 CSS Modules 或普通 CSS 即可 - 如果你的样式方案是运行时注入的，useInsertionEffect 可以解决 FOUC 问题 - useInsertionEffect 在 SSR 中不会执行，样式需要在服务端单独处理