React 全新编译器太好用了！-51CTO.COM

React 18 已经发布两年多了，现在终于要迎来 React 19 了。这个版本将引入期待已久的全新 React 编译器！它通过自动化优化来简化前端开发流程，减少手动进行记忆化优化的需求。本文就来看看 React 编译器是什么？它是如何工作的？又带来了哪些好处？

React 19 新特性

React 19 不仅是向前迈进的一步，而且想要改变开发人员在 React 中构建应用的方式。React 19 计划引入的一些最令人兴奋的特性包括：

服务端组件：通过服务端组件，React 19 能够实现更快的页面加载速度和更好的 SEO 效果。这意味着在将页面交付给用户之前，服务器会预先处理组件，从而提升用户体验和搜索引擎可见性。
Actions：React 19 引入了 Actions，这是一个全新的机制，用于简化网页内数据和交互的管理。通过 Actions，开发人员可以更方便地通过表单更新页面信息，减少复杂性并优化用户体验。
优化的资源加载：React 19 在资源加载方面进行了优化，允许在后台加载站点资源，以实现更平滑的页面过渡。这意味着用户可以在浏览当前页面时，提前加载下一页所需的图片和其他文件，从而减少页面切换时的等待时间。
文档元数据：React 19 引入了一个新的 <DocumentHead> 组件，用于简化 SEO 管理。通过该组件，开发人员可以更方便地向页面添加标题和元标签，提高搜索引擎优化效果，而无需进行重复的编码工作。
Web Components：React 19 改善了与 Web Components 标准的兼容性，使开发人员能够更轻松地使用 Web Components 构建灵活、兼容的 Web 应用。

React 编译器

React 编译器一项自动优化工具，旨在通过先进的编译技术减少不必要的重新渲染，提高 React 应用的性能。在深入探究 React 编译器的工作原理之前，我们先回顾一下 React 的核心思维模型。

React 心智模型

React的核心是一个声明式和基于组件的心智模型。在前端开发中，声明式编程意味着描述 UI 的期望最终状态，而无需通过 DOM 操作来指定达到该状态的每一步。同时，基于组件的方法将 UI 元素分解为可重用、简洁、自包含的构建块，促进了模块化并简化了维护。

为了有效地识别需要更新的特定 DOM 元素，React使用了一个称为虚拟 DOM 的内存中UI表示。当应用状态发生变化时，React会将虚拟DOM与真实DOM进行比较，识别出所需的最小更改集，并精确地更新真实DOM。

简而言之，React的心智模型是：每当应用状态发生变化时，React就会重新渲染。然而，有时React可能会过于“反应灵敏”，导致不必要的重新渲染，从而降低应用的性能。

重新渲染的困境

React 对应用状态变化的快速响应能力是一把双刃剑。一方面，由于其声明式方法，它简化了前端开发。另一方面，它可能导致 UI 中组件对状态变化的过度重新渲染。

当处理如对象和数组这样的 JavaScript 数据结构时，重新渲染问题尤为常见。问题在于，JavaScript中没有一种计算效率高的方法来比较两个对象或数组是否相等（即具有相同的键和值）。

考虑以下场景：有一个React组件，它在每次渲染时都会生成一个新的对象或数组，如下所示：

import React from "react";

const AlphabetList = () => {
  const alphabet = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i));

  return (
    <div>
      <h2>Alphabet List</h2>
      <ul>
        {alphabet.map((letter, index) => (
          <li key={index}>{letter}</li>
        ))}
      </ul>
    </div>
  );
};

export default AlphabetList;

尽管React组件在每次渲染时可能生成内容相同的本地数组，但React无法直接识别出这一点，因此可能会不必要地触发依赖于该数组中值的组件及其嵌套DOM元素的重新渲染，即使 UI 实际上没有变化。这种不受控制的重新渲染会很快导致性能下降，影响用户体验。

为了优化这种情况并减少不必要的重新渲染，React 开发人员可以利用记忆化技术。记忆化允许缓存基于特定输入的计算结果或组件输出，并在输入未变时直接复用这些结果。这种方法能够显著减少组件的重新渲染次数，提高 React 应用的整体性能和效率。

React 18 提供了以下记忆化工具来帮助我们实现这一目标：

React.memo()：一个高阶组件，允许基于props的浅比较来避免组件的重新渲染，只要props没有发生变化。
useMemo()：用于在组件重新渲染之间缓存计算的结果。只有当依赖项之一发生变化时，useMemo()才会重新计算并返回新的结果。
useCallback()：用于缓存函数的定义，确保在依赖项未变时不会重新创建函数。

通过使用useMemo() Hook，可以优化<AlphabetList>组件，避免在其依赖的数据（如数组）未发生变化时进行不必要的重新渲染。这种方法能够显著提高组件的性能，确保 UI 的流畅性和响应性。

import React, { useMemo } from "react";

const AlphabetList = () => {
  const alphabet = useMemo(() => {
    return Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i));
  }, []);

  return (
    <div>
      <h2>Alphabet List</h2>
      <ul>
        {alphabet.map((letter, index) => (
          <li key={index}>{letter}</li>
        ))}
      </ul>
    </div>
  );
};

export default AlphabetList;

React 的记忆化工具确实在提升性能上起到了关键作用，但它们确实增加了开发者的工作量和代码复杂度，因为它要求开发者不仅描述 UI 的状态，还需显式管理渲染的优化。这在一定程度上违背了 React 强调的声明式编程哲学。

为了减轻开发者的负担，理想的解决方案是一个智能的编译器或工具链，它能够自动分析 React 组件的依赖关系，并生成优化的代码。这样的工具能够确保组件仅在状态值发生实质性变化时重新渲染，从而在不牺牲性能的前提下，保持代码的简洁性和可维护性。

React 编译器是什么？

React 编译器，亦名React Forget，是一款针对 React 的优化编译器。它目前已在 Instagram 的网页门户中投入生产使用，并计划在首次开源发布前，扩展至 Meta 旗下的其他应用。

最初，React 编译器旨在通过自动生成类似于memo、useMemo和useCallback的调用，来强化React的核心编程模型，进而降低重新渲染的开销。随着时间的推移，该项目已从“自动记忆化编译器”演进为更为先进的“自动响应性编译器”。

React Forget 的核心目标，是确保 React 应用能够默认拥有合理的响应性。这意味着应用仅在状态值发生实质性变化时才会触发重新渲染。传统的 React 在对象标识改变时会重新渲染组件，而 React Forget 则通过智能判断，仅在对象的语义内容变化时触发重新渲染，同时避免了深度比较带来的性能损耗。从技术实现来看，React 编译器采用了自动记忆化技术。但开发团队认为，响应性框架是理解其工作原理的更全面视角。

尽管 JavaScript 的动态特性和宽松规则使其优化变得复杂，但 React 编译器通过模拟JavaScript和React的规则，确保了代码编译的安全性和效率。这些规则在限制开发人员操作的同时，也为编译器执行优化提供了安全的操作空间。

React 编译器好处

React 编译器的引入带来了显著的益处：

简化记忆化管理：开发者无需手动编写和维护复杂的记忆化策略，从而降低了代码的复杂性，减少了出错的风险，并极大简化了开发流程。
提升开发者体验：开发者能够更专注于核心功能的构建，无需分心于繁琐的性能优化工作。不仅提高了生产力，还让他们能更充分地利用React的声明式编程优势。
加速React应用性能：React 编译器智能地决定何时渲染组件，有效减少了不必要的计算和资源消耗。这使得用户界面更加流畅和响应迅速，为用户带来了更好的体验，并显著提升了整体应用的性能。

尽管这些改变令人充满期待，但我们仍需观察 React 编译器在实际代码开发中的具体效果。为了确保编译器能够高效运行，开发者需要确保他们的代码严格遵循 React 的规则。因此，官方团队强烈推荐使用 ESLint 等工具来准备和检查代码，以确保其兼容性并充分利用 React 编译器的潜力。

React 的规则

React 设定了一套严格的规范，以确保Web应用的高质量。开发者需遵循这些原则，它们同样是 React 编译器背后的基石。

以下是React的几个核心规则：

幂等性组件：React组件在接收到相同的输入（包括props、state和context）时，应始终产生一致的输出。
副作用外部化：副作用操作（如数据获取、订阅或DOM更新）不应嵌入在组件的渲染流程中。它们应被放置在如useEffect等生命周期 Hook 中执行。
不可变props与state：React组件中的props和state应被视为不可变。直接修改它们可能导致错误和不可预测的行为。
Hooks参数与返回值的不变性：一旦值被传递给 React Hooks，它们应保持不变。Hooks依赖其参数和返回值的稳定性来确保组件行为的一致性和可预测性。
不可变JSX值：在 JSX 渲染后，不应修改其中使用的值。任何必要的修改应在JSX创建之前进行，以确保渲染结果的稳定性。
组件函数的使用限制：React组件应通过JSX使用，而非直接作为普通函数调用。
Hooks的正确使用：React Hooks（如useState和useEffect）应仅在函数组件内部使用。将它们作为普通值传递可能会导致不符合预期的行为并违反Hooks的使用规则。从常规的JavaScript函数中调用hooks可能会导致错误并违反hooks的规则。
只在顶层调用hooks：React hooks 应该始终在函数组件的顶层调用，即在任何条件语句或循环之前。这确保了hooks在每次渲染时都以相同的顺序被调用，并保持其预期的行为。