快速了解 React 团队最新动向，React 19 要来啦！

前言

就在上周，React Conf 2024 如期举行，这一 React 盛会的到来，同时也为我们带来了久违的 "大的要来了" 的感觉，那么就让我们来好好看一看，到底有哪些新特性 和改进。

React Compiler

React Compiler 是一个新的构建时工具，它可以自动优化你的 React 应用程序以提高其性能，特别是在更新（重新渲染）时。

它可以自动将你的代码进行记忆化，你可能已经通过useMemo，useCallback，和React.memo等API熟悉了记忆化。这些API可以告诉React，如果你的应用程序的某些部分的输入没有改变，那么在更新时就不需要重新计算，从而减少了更新的工作量因此，React Compiler非常适合用于需要大量状态更新的复杂应用程序，以提高其性能。

React Compiler 正在向开源和生产使用方向发展。

React Compiler 不再是一个研究项目，现在已经在 Instagram 的生产环境中运行。
团队计划将 compiler 部署到其他 Meta 平台，并准备进行开源发布。
compiler 旨在通过基于状态变化自动优化重新渲染，从而消除手动记忆化的需要。
compiler 遵循严格的 React 规则，以确保代码转换的安全性和可预测性。

React 19 RC

React 团队在2024年4月25日发布了 React 19 的 RC 版本这个版本主要是为了让库开发者为 React 19 做准备。那么在这个新版本中具体有哪些改动？让我们往下看一看。

1、Actions

Actions 简化了在网页中处理数据 和交互的方式。例如，

当用户提交一个表单来更改他们的名字时，你将发起一个API请求，然后处理响应。

在React 19中，我们添加了对在转换中使用异步函数的支持，以自动处理等待状态、错误、表单、优化更新和顺序请求。因此，Actions 非常适合用于需要处理数据变更 和状态更新 的交互式应用程序。

例如，你可以处理待处理和错误状态 useState：

js 复制代码

// Before Actions  
function UpdateName({}) {  
    const [name, setName] = useState("");  
    const [error, setError] = useState(null);  
    const [isPending, setIsPending] = useState(false);  

    const handleSubmit = async () => {  
        setIsPending(true);  
        const error = await updateName(name);  
        setIsPending(false);  
        if (error) {  
            setError(error);  
            return;  
        }  
        redirect("/path");  
    };  

    return (  
        <div>  
            <input value={name} onChange={(event) => setName(event.target.value)} />  
            <button onClick={handleSubmit} disabled={isPending}>  
                Update  
            </button>  
            {error && <p>{error}</p>}  
        </div>  
    );  
}

在 React 19 中，我们添加了在转换中使用异步函数的支持，以自动处理待处理状态、错误、表单和乐观更新。

例如，您可以使用useTransition来处理待处理状态

js 复制代码

// Using pending state from Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      } 
      redirect("/path");
    })
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

异步转换将立即将isPending状态设置为 true，发出异步请求，并isPending在任何转换后切换为 false。这可让您在数据发生变化时保持当前 UI 的响应和交互。

除此之外，Actions 还提供了以下能力：

Pending state：操作提供待处理状态，该状态从请求开始时开始，并在提交最终状态更新时自动重置。
Optimistic updates ：操作支持新的useOptimistic钩子，因此您可以在提交请求时向用户显示即时反馈。
Error handling：操作提供错误处理，以便您可以在请求失败时显示错误边界，并自动将乐观更新恢复为其原始值。
Forms ：<form>元素现在支持将函数传递给action和formAction道具。将函数传递给action道具默认使用 Actions，并在提交后自动重置表单。

我就不在这里一一赘述了哈。

2、Server Components

React 19 RC 引入了 服务器组件 的概念，这可以在服务器上渲染组件，从而加快页面加载速度并提高 SEO。因此，Server Components 非常适合用于需要快速响应 和高效 SEO 的 Web应用程序。

服务器组件是一种新型组件，它在捆绑之前在与客户端应用程序或 SSR 服务器分开的环境中提前呈现。

这个单独的环境是 React Server Components 中的"服务器"。服务器组件可以在构建时在 CI 服务器上运行一次，也可以使用 Web 服务器针对每个请求运行。

3、Asset Loading

通常，视图首先在浏览器中呈现，然后是样式表、字体和图像。这可能会导致从无样式视图到有样式视图的闪烁，称为无样式内容闪烁 (FOUC)。

React 19 之前： 为了缓解 FOUC 问题，开发人员通常会添加自定义代码来检测资源何时准备就绪，确保仅在所有内容加载完成后才显示视图。然而，这种方法可能很复杂且繁琐。

现在 Asset Loading 可以在后台加载资源，从而改善页面的过渡效果。这使得你可以在用户浏览当前页面时在后台加载这些资源。这种优化不仅提高了 React 应用程序的性能，而且为用户提供了更愉快的浏览体验。

4、Document Metadata

Document Metadata是一个即将到来的改进，它将使开发者能够用更少的代码完成更多的工作。

例如，在 HTML 中，文档元数据标签（如<title>、<link>和）<meta>保留用于放置在<head>文档的部分中。在 React 中，决定哪些元数据适合应用程序的组件可能距离您渲染的位置非常远，<head>或者 React<head>根本不渲染。

过去，这些元素需要手动插入到效果中，或者通过等库插入react-helmet，并且在服务器渲染 React 应用程序时需要小心处理。

在 React 19 中，我们添加了对在组件中原生渲染文档元数据标签的支持：

js 复制代码

function BlogPost({post}) {
  return (
    <article>
      <h1>{post.title}</h1>
      <title>{post.title}</title>
      <meta name="author" content="Josh" />
      <link rel="author" href="https://twitter.com/joshcstory/" />
      <meta name="keywords" content={post.keywords} />
      <p>
        Eee equals em-see-squared...
      </p>
    </article>
  );
}

当 React 渲染此组件时，它将看到<title> <link>和<meta>标签，并自动将它们提升到<head>文档部分。通过原生支持这些元数据标签，我们能够确保它们适用于仅限客户端的应用程序、流式 SSR 和服务器组件。

5、支持自定义元素

React 19 增加了对自定义元素的全面支持，并通过了Custom Elements Everywhere的所有测试。

在过去的版本中，在 React 中使用自定义元素很困难，因为 React 将无法识别的 props 视为属性 (attribute ) 而不是属性 (property)。在 React 19 中，我们通过以下策略添加了对在客户端和 SSR 期间起作用的属性的支持：

服务器端渲染 ：如果传递给自定义元素的 props 的类型是原始值（例如string、number或），则它们将渲染为属性true。具有非原始类型的 props（例如object、symbol、function或）值false将被省略。
客户端渲染：与自定义元素实例上的属性匹配的 props 将被分配为属性，否则将被分配为属性。

React 的发展方向

其实从最近两个大版本的 feature 中，我们不难发现目前 React 的改进方向主要是为了提高React的性能 ，提升用户体验 ，以及简化开发者的工作。

React Compiler 可以提高应用程序的性能，Asset Loading 可以改善用户体验，而 Actions 可以简化开发者的工作。此外，Server Components 和 Custom Elements 的支持可以使 React 更加灵活和强大，以满足各种复杂的需求。

以上只是我的个人观点与整理，如果大家有什么想要补充与讨论的，欢迎随时联系。

快速了解 React 团队最新动向，React 19 要来啦！

前言

React Compiler

React 19 RC

1、Actions

2、Server Components

3、Asset Loading

4、Document Metadata

5、支持自定义元素

React 的发展方向

参考