开发者对 React 19 Beta 发布感到困惑

React 19 beta 终于来了，但其中一些非常棒的功能却因困惑和沟通不畅而黯然失色。

React 19 beta 可以随时发布，但现在选择在 2024 年 3 月 25 日发布实属最佳，因为开发世界暂时没有其他重大事件。

编译器尚未到来

一些开发者对这次发布持乐观态度，但也有许多人担心此次版本中没有提到编译器。

React 编译器是 React 团队长时间实验的工具，目前用于运行 Instagram，并且预计很快会发布。开发者们对编译器的期望很高，因为它将减少手动记忆化的需求，这是一项耗时且容易出错的 React 修补工作。有了编译器，React 将更善于判断何时需要更新 UI，何时不需要，从而提升性能。

但我们仍不确定编译器何时能正式发布。可能在五月，也许是 2024 年或 2026 年？希望它能在新 GTA 发布前上线！

你将享受更多的服务器端支持

SPA（单页应用）爱好者可能对这些消息不太满意，因为 React 仍在继续推进对服务器端特性的支持。

其实，SPA 并不适合描述这类应用程序。任何认为应用和 API 应该完全分开的开发者都可能不喜欢 React 正在推进的方向。

use server 和 actions 引入了一个新的思维模式，在这一模式下，可以在服务器或浏览器中无缝运行代码，除非明确指定其他方式。

这种新的思维模式通过 actions 得到了扩展，能够处理待处理和错误状态。

然而，这个新模型在博客文章中解释得并不清楚，容易让 React 开发者感到困惑。

这也可以理解，因为新的 React 文档建议开发者使用基于 React 的框架，而不是直接使用 React。但另一方面，这也使得直接使用 React 的开发者面临困难局面。

我们有了新的 hooks 和表单操作，可以直接从表单元素级别获取表单状态。

新的 API 可以通过 use 函数调用来挂起功能，还提供了服务器组件。

React 团队需要付出大量努力来向新手程序员解释这些复杂内容。

但也有一些不错的方面。

可以告别 forwardRef，被 ref 取代

forwardRef 现在将被替换，你可以直接用 ref 传递组件元素。这是一个让人意外的好变化。

可以直接使用 Context 而不是 Context.Provider

现在提供上下文时，你无需使用 Context.Provider，而是直接使用 Context。示例如下：

const ThemeContext = createContext('');

function App({children}) {
  return (
    <ThemeContext value="dark">
      {children}
    </ThemeContext>
  );  
}

可以更方便地清理被卸载的 refs：

通过在组件卸载时清理关联的 refs，可以确保没有悬挂的引用或潜在的内存泄漏。

<input
  ref={(ref) => {
    // 当 ref 被创建时，执行一些初始化操作
    if (ref) {
      // 初始化代码，例如，添加事件监听器或设置属性
    }

    // 返回清理函数，在元素被移除时调用
    return () => {
      // 清理代码，例如，移除事件监听器或重置属性
    };
  }}
/>

可以在任何组件中定义 <meta> 标签

另一个值得注意的改进是，现在支持从任意组件动态更新 <meta> 标签。

import { Helmet } from "react-helmet";

function BlogPost({ post }) {
  return (
    <article>
      <Helmet>
        <title>{post.title}</title>
        <meta name="author" content="Josh" />
        <link rel="author" href="https://twitter.com/joshcstory/" />
        <meta name="keywords" content={post.keywords} />
      </Helmet>

      <h1>{post.title}</h1>
      <p>Eee equals em-see-squared...</p>
    </article>
  );
}

可以在组件级别使用样式表

现在，在组件级别添加样式将不会出现任何问题。React 将在显示组件之前加载样式表，这也为懒加载样式提供了可能性：

function ComponentOne() {

  return (

    <Suspense fallback="loading...">

      <link rel="stylesheet" href="foo" precedence="default" />

      <link rel="stylesheet" href="bar" precedence="high" />

      <article class="foo-class bar-class">

        {...}

      </article>

    </Suspense>

  )

}

可以预加载资源

在 React 19 中，你将能够在组件中使用函数预加载资源，而不是在 HTML 中通过 HTML 标签预加载。

import { prefetchDNS, preconnect, preload, preinit } from 'react-dom'

function MyComponent() {

  preinit('https://.../path/to/some/script.js', {as: 'script' }) // loads and executes this script eagerly

  preload('https://.../path/to/font.woff', { as: 'font' }) // preloads this font

  preload('https://.../path/to/stylesheet.css', { as: 'style' }) // preloads this stylesheet

  prefetchDNS('https://...') // when you may not actually request anything from this host

  preconnect('https://...') // when you will request something but aren't sure what

}

基本的自定义元素支持

React 团队仍在努力支持 HTML 自定义元素。虽然目前还没有针对 React 19 beta 的官方测试结果，但根据 React 博客的说法，它是符合测试标准的。

PropTypes 被移除了

PropTypes 是 React 团队做出的一个奇怪决策，当时他们完全忽略了 TypeScript 的存在。

幸运的是，PropTypes 在 2017 年被弃用，现在处理它们的代码已从 React 中移除。这意味着在代码库中保留这些怪物般的工具已经没有意义了。如果想要了解自己正在使用的类型，至少需要将代码库重写为 TypeScript。

如何为 React 19 做好准备？

React 19 beta 已经发布，但这并不意味着你必须立刻更新。我建议等待正式发布。然而，你可以先安装 React 18.3.0。它和 18.2.0 类似，但会显示关于在 React 19 中将被废弃的功能的提示信息。

因此，你可以提前做好准备。

你可以在 npm 上找到 React 19 beta 和 React 18.3.0 版本的构建包。

React 19 beta 的源码暂时不可用。

最后：

vue2与vue3技巧合集

VueUse源码解读