专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

React:我们一直在做什么

ins518 2025-05-14 14:04:45 技术文章 5 ℃ 0 评论

2023年3月22日作者：Joseph Savona、Josh Story、Lauren Tan、Mengdi Chen、Samuel Susla、Sathya Gunasekaran、Sebastian Markbage和Andrew Clark

在React Labs的帖子中，我们写到了积极研发的项目。自上次更新以来，我们在这些方面取得了重大进展，我们想分享我们学到的东西。


React Server Components（简称RSC）是由React团队设计的一种新的应用程序架构。

我们首先在一个介绍性的演讲和RFC中分享了有关RSC的研究。简而言之，我们引入了一种新的组件类型——服务器组件，它们可以在构建时运行，并且不包含在JavaScript包中。服务器组件可以在构建期间运行，让您从文件系统或获取静态内容。它们也可以在服务器上运行，让您在不必构建API的情况下访问数据层。您可以通过props从服务器组件传递数据到浏览器中的交互式客户端组件。

RSC将服务器为中心的多页应用程序的简单“请求/响应”模型与客户端为中心的单页应用程序的无缝交互性相结合，为您提供了最好的两个世界。

自上次更新以来，我们已经将React Server Components RFC合并以正式通过提案。我们解决了React Server模块约定提案的未解决问题，并与我们的合作伙伴达成共识，采用“使用客户端”的约定。这些文档也作为RSC兼容实现应支持的规范。

最大的变化是，我们引入了async/await作为从服务器组件获取数据的主要方式。我们还计划通过引入一个名为“use”的新hook来支持从客户端加载数据，该hook解开Promises。虽然我们无法支持客户端应用程序中任意组件的async/await，但我们计划在您按照RSC应用程序的结构构建客户端应用程序时添加支持。

现在我们已经相当好地解决了数据获取的问题，我们正在探索另一个方向：从客户端向服务器发送数据，以便执行数据库突变并实现表单。我们通过让您在服务器/客户端边界传递服务器操作函数来实现此目的，客户端随后可以调用它们，提供无缝的RPC。服务器操作还为JavaScript加载之前提供了渐进式增强的表单。

React Server Components已经在Next.js应用程序路由器中上线。这展示了路由器的深度集成，它真正买入了RSC作为基元，但这不是构建RSC兼容路由器和框架的唯一方法。RSC规范和实现提供了一些特定功能的清晰分离。React Server Components旨在成为跨兼容React框架工作的组件规范。

我们通常建议使用现有框架，但如果您需要构建自己的定制框架，也是可以的。构建自己的RSC兼容框架并不像我们希望的那

资源加载

Suspense允许您指定在组件的数据或代码仍在加载时在屏幕上显示什么内容。这使得用户可以在页面加载期间和加载更多数据和代码的路由导航期间逐步看到更多内容。但是，从用户的角度来看，考虑新内容是否准备好时，数据加载和渲染并不是全部内容。默认情况下，浏览器独立加载样式表、字体和图像，这可能会导致UI跳跃和连续的布局转换。

我们正在努力将Suspense与样式表、字体和图像的加载生命周期完全整合，以便React将它们考虑在内，以确定内容是否已准备好显示。在不改变您编写React组件的方式的情况下，更新将以更连贯和令人愉悦的方式进行。作为优化，我们还将提供一种手动方式，直接从组件中预加载像字体这样的资源。

我们目前正在实现这些功能，并将很快有更多内容分享

文档元数据

您的应用程序中的不同页面和屏幕可能具有不同的元数据，例如标题标签，描述和其他特定于此屏幕的<meta>标签。从维护的角度来看，将此信息保持靠近该页面或屏幕的React组件更具可扩展性。然而，此元数据的HTML标记需要位于文档<head>中，通常在应用程序的根组件中呈现。

今天，人们用以下两种技术解决这个问题。

一种技术是渲染一个特殊的第三方组件，将<title>，<meta>和其他标记移动到其中，并将其放入文档<head>。这对于主流浏览器有效，但许多不运行客户端JavaScript的客户端，例如Open Graph解析器，因此这种技术不是普遍适用的。

另一种技术是将页面分为两部分进行服务器呈现。首先，渲染主要内容并收集所有这些标记。然后，<head>以这些标记为参数进行呈现。最后，将<head>和主要内容发送到浏览器。这种方法有效，但它阻止您利用React 18的流式服务器呈现器，因为您必须等待所有内容呈现完成后再发送<head>。

这就是为什么我们正在添加内置支持，以便在组件树中的任何位置直接渲染<title>，<meta>和元数据<link>标记。它在所有环境中都以相同的方式工作，包括完全客户端代码、SSR和将来的RSC。我们将很快分享更多详细信息。

React优化编译器 自上次更新以来，我们一直在积极迭代React Forget的设计，这是一个用于React的优化编译器。我们以前将其称为“自动记忆编译器”，在某种意义上是正确的。但是，构建编译器使我们更加深入地理解了React的编程模型。更好的理解React Forget的方法是作为自动反应编译器....

更多可阅读原文：
https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表