React 全新编译器太好用了！

前端大全 · 公众号 · · 2024-06-05 11:50

正文

转自：前端充电宝

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 引入了一个新的 > 组件，用于简化 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，可以优化组件，避免在其依赖的数据（如数组）未发生变化时进行不必要的重新渲染。这种方法能够显著提高组件的性能，确保 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 编译器采用了自动记忆化技术。但开发团队认为，响应性框架是理解其工作原理的更全面视角。