React 有编译器啦？再也不用手动加 React.memo() 和写 useCallback() 啦？

XXUZZWZ
123 阅读5分钟

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 官方中文文档)。

🛠 怎么使用它？

  1. 安装 babel-plugin-react-compiler@rc（或者 @experimental）和对应的 ESLint 插件，甚至搭配 react-compiler-runtime@rc 来兼容 React 17/18 项目 (it.react.dev)。
  2. 配合 ESLint 插件 eslint-plugin-react-compiler，在编辑器中实时提示违反 React 规则的组件或钩子，便于你逐步修复并让更多组件被编译器优化 (React 官方中文文档)。
  3. 配置构建工具（如 Babel、Vite、Expo 等），将编译器 babel 插件置于 pipeline 最前端，以确保代码转换正确执行 (it.react.dev, Expo Docs)。
  4. 如有需要，可通过配置指定编译范围、跳过特定组件或使用 "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 最标准的性能优化方式之一！

📚 参考资料：

avatar
文章
阅读
粉丝