React 有编译器啦？再也不用手动加 React.memo() 和写 useCallback() 啦？
你没看错，React 团队正在推出一个全新的 React Compiler ——一个构建时工具，能自动为你的组件和钩子进行 memoization，让你告别忘加 React.memo()、useMemo()、useCallback() 的焦虑 👀。
🚀编译器是什么？
根据 React 官方中文文档，React Compiler 是一个纯构建时工具（build‑time only） ，无需改写你的 JavaScript 代码，仅需安装并配置即可自动优化你的组件逻辑，理解 React 的规则（Rules of React） ，为可能导致不必要重渲染的函数、组件和依赖自动加上缓存机制 (React 官方中文文档, it.react.dev)。
简而言之，它本质上是用编译技术生成类似于你手动包裹 React.memo、useMemo 或 useCallback 的优化代码。
🤔那真的可以不用写 memo 和 useCallback 了吗？
-
理论上，编译器可处理大多数常见场景：它会自动 memoize 组件、函数、昂贵计算，减少级联重新渲染。例如，不再需要手动为组件包裹
React.memo，也不用自己写useCallback或useMemo来缓存函数或计算结果 (React 官方中文文档)。 -
实践中也有不少用户表示感受明显：“安装好编译器，它就能正常工作；无需重写现有代码……安装后，我们将再也不需要考虑 React.memo、useMemo 和 useCallback” (sorrycc.com)。
-
React 中文参考指出：
React Compiler 会自动对值和函数进行记忆化处理，从而减少手动调用
useCallback的需求 (React 官方中文文档)。
不过，也有一些提醒和保留意见：
- React 团队建议，如果你的现有代码里已经用了手动 memoization（
React.memo/useCallback），可以保留它们，编译器仍会正确处理这类情形 (GitCode)。 - 一个过渡期仍然存在。虽然编译器自动化程度高，但对编译器如何优化、哪些场景跳过优化、性能改进如何测量，开发者仍需要理解
useMemo/useCallback的使用原理与调试方式 (React 官方中文文档)。
🛠 怎么使用它？
- 安装
babel-plugin-react-compiler@rc（或者@experimental）和对应的 ESLint 插件，甚至搭配react-compiler-runtime@rc来兼容 React 17/18 项目 (it.react.dev)。 - 配合 ESLint 插件
eslint-plugin-react-compiler，在编辑器中实时提示违反 React 规则的组件或钩子，便于你逐步修复并让更多组件被编译器优化 (React 官方中文文档)。 - 配置构建工具（如 Babel、Vite、Expo 等），将编译器 babel 插件置于 pipeline 最前端，以确保代码转换正确执行 (it.react.dev, Expo Docs)。
- 如有需要，可通过配置指定编译范围、跳过特定组件或使用
"use no memo"指令排除优化 (React 官方中文文档)。
安装完成后，在 React DevTools（内建于 v5+）中，你可以看到被编译器优化的组件旁边会出现一个 “Memo ✨” 徽章，直观看到哪些组件生效了 (React 官方中文文档)。
🌟 优势一览
| 优势 | 说明 |
|---|---|
| 减少手动优化负担 | 自动 memoize，无需显式写 React.memo / useMemo / useCallback |
| 提升更新性能 | 能跳过级联渲染，优化昂贵计算，支持细粒度 re-render (React 官方中文文档) |
| 渐进式 adopt | 能兼容 React 17+，逐步在项目中启用 |
| 编辑器+DevTools支持 | ESLint 提示规则违规，DevTools 可视化优化结果 |
⚠️ 限制与注意事项
- 仍在 RC/实验阶段，虽然已有生产项目试用（如 Meta 内部），但还未稳定，谨慎在大规模生产环境启用 (React 官方中文文档)。
- 编译器并非万灵药：对于跨多个组件共享的昂贵函数不会跨组件复用 memo 缓存；只在组件内部记忆一次性调用 (React 官方中文文档)。
- 规则违规组件会跳过优化：如果组件违反了 Rules of React，编译器会跳过对它及其钩子的优化，此时你仍需人工介入 (React 官方中文文档)。
- 类似过度依赖“魔法” ：有人指出，盲目相信编译器就能完全代替手写 memo，存在过渡期风险；开发者应了解底层优化逻辑，必要时仍可主动使用
useCallback和memo来调试或覆盖行为 (zhangzidan.com)。
✅总结：
React Compiler 的出现，确实宣告了一个新时代：你可能真的不用再手动写 React.memo()、useCallback()、useMemo() 了——只要你的代码符合 React 的规则，编译器就会自动替你优化。
不过，目前它仍处于实验阶段，建议先在小范围试点，配合 ESLint 插件观察哪个组件被优化，逐步迭代。对于某些性能关键组件，开发者依旧需要掌握 memo 技巧，并在必要时手动介入与调试。
总之，如果你还在为忘写 memo 或 callback 而频繁调试性能，那这个工具值得一试。未来，也许这将成为 React 最标准的性能优化方式之一！
📚 参考资料：
- React 中文官方文档介绍 React Compiler 功能与安装、使用方式 (React 官方中文文档, it.react.dev)
- 社区公众号与技术博客对 React Compiler 的解读与实践建议 (知乎专栏, sorrycc.com, Developer Way, GitCode)
