likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 50

前言

就在上周，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：

// 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来处理待处理状态

// 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 中，我们添加了对在组件中原生渲染文档元数据标签的支持：

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 更加灵活和强大，以满足各种复杂的需求。

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

参考

转载自:https://juejin.cn/post/7372400694764535849
评论
请登录