导语
React 在 10 月发布 Compiler v1.0 稳定版，并在 19.2 中补齐多项能力（Activity、Performance Tracks、useEffectEvent）。然而，编译器不是“魔法棒”。本文总结 12 个常见反模式，并提供“开启前—运行中—回退后”的工程校验清单，帮助团队安全落地。
常见反模式（12 条）
- 以为“所有重渲染都有害”：忽视必要重渲染，过度追求“零重渲染”。
- 动态可变引用充斥：频繁创建匿名函数/对象，破坏稳定性假设。
- 复杂副作用塞进 useEffect：忽略 useEffectEvent，把事件处理与副作用混在一起。
- 不可预测的外部可变状态：全局单例/可变模块状态，编译器难以正确优化。
- 巨石组件：容器/展示未分离，难以识别稳定边界。
- 过度依赖第三方可变库：拖拽/图形库的可变引用无隔离。
- 无性能基线：不做 Profiler/INP 基线，收益无法验证。
- CSS/动画引入布局抖动：误将渲染抖动归咎编译器。
- SSR/RSC 时序未校验：数据获取与边界条件未测试。
- 忽视错误边界：无法定位优化后的异常路径。
- 构建链版本错配：编译插件/类型定义不一致。
- 无回滚：开启范围扩大而无回退策略。
工程校验清单
- 启用前：
- 基线：web-vitals、React Profiler；
- 规范：副作用归位、稳定引用、不可变数据；
- 构建：Compiler 插件版本与 React 版本对齐；
- 运行中：
- 金丝雀：从高收益页面开始；
- 可观测：INP/渲染次数、内存；
- 风险：SSR/RSC 时序与第三方可变库隔离；
- 回退与复盘：
- 回退阈值（INP/错误率）；
- 记录“配置 → 指标变化”的因果；
- 输出规范增补。
案例与对比（思路）
- 高频表格：采用稳定引用 + 分段渲染，Compiler 开启后渲染次数下降 30%+；
- 富交互画布：第三方可变库隔离，避免优化失效；
- 表单场景：useEffectEvent 重构副作用，减少依赖数组复杂度与误触发。
团队规范模板（要点）
- 副作用分类与边界；
- 稳定引用与不可变数据约束；
- 组件拆分策略（容器/展示/控制）；
- 性能预算（渲染预算/INP）与监控面板。
结语
Compiler 的价值在于“自动把简单事做对”，但复杂性的边界仍在团队的工程实践中。以规范与观测为锚，才能把“性能红利”稳定转化为“用户体验与维护成本”的双赢。
参考
- React 19.2、Compiler v1.0、React Conf 2025 Recap（官方博客 10 月）
