useInsertionEffect：99% 的人用不到

React 有三个 Effect Hook，但 useInsertionEffect 大概是最没人关注的那个——官方文档甚至直接劝退："除非你在开发 CSS-in-JS 库，否则不需要它。"但这个 Hook 的诞生背景远比它的 API 有趣。React 18 引入并发渲染后，styled-components、Emotion 等运行时 CSS-in-JS 库遭遇了致命问题：渲染可能被中断和丢弃，导致样式被注入了却没有对应的 DOM 消费——"幽灵样式"由此而来。useInsertionEffect 卡在 DOM 变更之前、提交阶段之后这个精确的时间点，专门为样式注入提供了一条"生命线"。本文从三个 Effect 的执行时序讲起，深入 CSS-in-JS 的历史债务、并发模式下的样式注入困境、useInsertionEffect 的硬性约束与设计哲学，再到 Tailwind、vanilla-extract 等零运行时方案的崛起，帮你看清这个"最冷门 Hook"背后的技术脉络与生态变迁。#前端 #前端开发 #react #前端进阶 #前端面试