React 全新编译器太好用了！

未经授权，禁止转载，转载请注明出处！

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

React 19 新特性

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

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";
constAlphabetList=()=>{
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>
);
};
exportdefault AlphabetList;


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

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

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

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

import React,{ useMemo }from"react";
constAlphabetList=()=>{
const alphabet =useMemo(()=>{
returnArray.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>
);
};
exportdefault 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 的规则。因此，官方团队强烈推荐使用 ESLint 等工具来准备和检查代码，以确保其兼容性并充分利用 React 编译器的潜力。

React 的规则

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

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