转载自前端移动电源
React 18 已经发布两年多了，但React 19 终于来了。此版本引入了期待已久的新React 编译器。自动优化简化了前端开发流程，减少了记忆手动优化的需要。在这篇文章中，我们来看看什么是React编译器。它是如何发挥作用的？
React 19 新特性
React 19 不仅仅是向前迈出了一步，它还希望改变开发人员使用React 构建应用程序的方式。 React 19 中一些最令人兴奋的功能包括：
服务器端组件：使用服务器端组件，React 19 提高了页面加载速度并改善了SEO。这意味着在将页面交付给用户之前，服务器会预处理组件，从而提高用户体验和搜索引擎可见性。
动作：React 19 引入了动作，这是一种简化网页内数据管理和交互的新机制。 Actions 允许开发人员通过表单轻松更新页面信息，降低复杂性并优化用户体验。
优化的资源加载：React 19 优化了资源加载，允许您网站的资源在后台加载，以实现更流畅的页面转换。这允许用户在查看当前页面时预加载下一页所需的图像和其他文件，从而减少页面切换时的等待时间。
文档元数据：React 19 引入了新的DocumentHead 组件来简化SEO 管理。该组件允许开发人员轻松地向页面添加标题和元标记，以改善搜索引擎优化结果，而无需重复编码工作。
Web 组件：React 19 提高了与Web 组件标准的兼容性，使开发人员可以更轻松地使用Web 组件构建灵活且兼容的Web 应用程序。
React 编译器
React Compiler 是一个自动优化工具，旨在通过先进的编译技术减少不必要的重新渲染并提高React 应用程序的性能。在解释React 编译器如何工作之前，我们先回顾一下React 的核心思维模型。
React 心智模型
React 的核心是声明性的、基于组件的心理模型。在前端开发中，声明式编程意味着描述UI 所需的最终状态，而不指定通过DOM 操作达到该状态的每个步骤。另一方面，基于组件的方法将UI 元素分解为可重用、简洁且独立的组件，从而促进模块化并简化维护。
为了有效地识别需要更新的特定DOM 元素，React 使用称为虚拟DOM 的内存中UI 表示。当应用程序的状态发生变化时，React 会将虚拟DOM 与真实DOM 进行比较，确定所需的最小更改集，并准确更新真实DOM。
简而言之，React 的思维模型是：每次应用程序状态发生变化时，React 都会重新渲染。然而，在某些情况下，React 可能过于“反应性”，导致不必要的重新渲染并降低应用程序的性能。
重新渲染的困境
React 快速响应应用程序状态变化的能力是一把双刃剑。另一方面，声明式方法简化了前端开发。另一方面，它可能会导致UI 中的组件为了响应状态更改而过度重新渲染。
在使用对象和数组等JavaScript 数据结构时，重新渲染问题尤其常见。问题在于JavaScript 没有一种计算有效的方法来比较两个对象或数组以查看它们是否相等（即具有相同的键和值）。
考虑以下场景。我有一个React 组件，它在每次渲染时生成一个新的对象或数组，如下所示：
从“反应”导入反应。
const 字母列表=()={
const 字母表=Array.from({ length: 26 }, (_, i)=String.fromCharCode(65 + i));
返回（
分配
h2 字母列表/h2
乌尔
{alphabet.map((字符，索引)=(
li 键={索引}{字符}/li
))}
/ul
/div
）；
};
导出默认的AlphabetList。
React 组件可能会在每次渲染时生成具有相同内容的本地数组，但React 并不直接了解这一点，并且可能会不必要地重新渲染依赖于该数组中的值的组件及其嵌套DOM 元素。 UI 实际上并没有改变。这种不受控制的重新渲染会很快导致性能下降并影响用户体验。
为了优化这种情况并减少不必要的重新渲染，React 开发人员可以利用记忆技术。记忆化允许您根据特定输入缓存计算结果或组件输出，并在输入未更改时直接重用这些结果。这种方法显着减少了组件重新渲染的数量，并提高了React 应用程序的整体性能和效率。
React 18 提供了以下记忆工具来帮助您实现这一目标：
React.memo()：一个高阶组件，允许对props 进行浅层比较，以避免重新渲染组件，除非prop 已更改。
useMemo()：用于缓存组件重新渲染之间的计算结果。仅当任何依赖项发生更改时，useMemo() 才会重新计算并返回新结果。
useCallback()：用于缓存函数的定义，以便在依赖项未更改时不会重新创建函数。
useMemo() 挂钩允许您优化AlphabetList 组件，以避免在依赖数据（例如数组）未更改时不必要的重新渲染。这种方法显着提高了组件性能并确保流畅且响应灵敏的UI。
从\’react\’ 导入React, { useMemo };
const 字母列表=()={
const 字母表=useMemo(()={
return Array.from({ length: 26 }, (_, i)=String.fromCharCode(65 + i));
}, []);
返回（
分配
h2 字母列表/h2
乌尔
{alphabet.map((字符，索引)=(
li 键={索引}{字符}/li
))}
/ul
/div
）；
};
导出默认的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）中才能执行。
不可变的props 和状态：React 组件的props 和状态应该被认为是不可变的。直接更改这些可能会导致错误或意外行为。
Hooks 参数和返回值的不变性：一旦将值传递给React Hooks，它就必须保持不变。 Hooks 依靠参数和返回值的稳定性来确保组件行为的一致性和可预测性。
不可变的JSX 值：JSX 中使用的值在渲染后不应更改。为了确保稳定的渲染结果，您必须在创建JSX 之前进行任何必要的更改。
使用组件函数的限制：React组件必须通过JSX使用，而不是像常规函数一样直接调用。
正确使用钩子：React 钩子（例如useState 和useEffect）只能在功能组件中使用。将这些作为常规值传递可能会导致意外行为并违反钩子使用规则。从常规JavaScript 函数调用挂钩可能会导致错误并违反挂钩规则。
仅在顶层调用钩子：React 钩子应始终在功能组件的顶层、任何条件语句或循环之前调用。这确保了每个渲染都以相同的顺序调用钩子并保持预期的行为。
#以上是关于React的。新的编译器非常容易使用。相关内容来源网络仅供参考。相关信息请参见官方公告。
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/92383.html
