React 19 — 新功能

又来了，又一篇New features in (library)帖子🙄
我最近发了很多这样的帖子，但是有很多更新！

React 19 RC（候选版本）已于 2024 年 4 月发布，现在终于稳定了！在这篇文章中，我将讨论一些最新添加的功能。

让我们开始吧！

新钩子：`useFormStatus`

这个新的钩子非常棒。假设你有一个表单组件，以及表单中嵌套的几个组件（例如，按钮和复选框）。
在之前的 React 版本中，如果你想在表单待处理时（用户提交后）禁用复选框，你必须创建自定义上下文，或者将 props（例如，disabled prop）传递给表单的子组件。现在，在 React 19 中，你只需使用一个useFormStatus钩子即可：

import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();
  return <button type="submit" disabled={pending} />
}

该useFormStatus钩子会自动检测你的组件是否位于表单中，并返回你需要的值。想了解它还能做什么，请查看文档。

useFormStatus钩子文档

新的选择`useDeferredValue`

如果你还不知道它useDeferredValue是什么，那你就错过了！这个钩子允许你在加载新数据时显示旧数据。在 React 19 中，这个钩子新增了一个选项：initialValue。我们来看一个例子（摘自 react.dev 更新日志）：

function Search({deferredValue}) {
  // On initial render the value is ''.
  // Then a re-render is scheduled with the deferredValue.
  const value = useDeferredValue(deferredValue, '');

  return (
    <Results query={value} />
  );
}

当initialValue提供时，useDeferredValue将把它作为组件初始渲染的值返回，并使用deferredValue返回值在后台安排重新渲染。

这对于搜索或过滤页面等页面非常有用。要了解更多信息，请参阅以下文档。

文档元数据提升

这不是一个超级疯狂的更新，但它非常有用！
组件中的文档元数据现在将自动提升到<head>文档元素。

例如：

function BlogPost({post}) {
  return (
    <article>
      <h1>{post.title}</h1>
      <title>{post.title}</title>
      <meta name="author" content="BestCodes" />
      <link rel="author" href="https://x.com/the_best_codes/" />
      <meta name="keywords" content={post.keywords} />
      <p>
        Testing, one two three...
      </p>
    </article>
  );
}

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

这并非旨在取代元数据库，但它将使在 React 中处理元数据变得更加容易。

`ref`作为道具`ref`，清理

在 React 19 中，你现在可以将ref其作为函数组件的 prop 进行访问，而不必使用来完成所有复杂的工作forwardRef。

你现在还可以为 refs 定义清理函数。参见以下示例：

<input
  ref={(ref) => {
    // ref created

    // NEW: return a cleanup function to reset
    // the ref when element is removed from DOM.
    return () => {
      // ref cleanup
    };
  }}
/>

基本上，您现在可以ref按照清理的相同方式清理useEffect。

这些只是其中几个亮点！其他变化包括：

对错误日志进行了许多改进
一个useOptimistic钩子
异步<script>导入
样式表导入

还有更多！

要了解更详细的变化，请阅读react.dev React 19 博客文章。

感谢阅读！
BestCodes

鏂囩珷鏉ユ簮锛�https://dev.to/best_codes/new-features-in-react-19-stable-4ded

React 19 — 新功能

React 19 — 新功能

新钩子：useFormStatus

新的选择useDeferredValue

文档元数据提升

ref作为道具ref，清理

新钩子：`useFormStatus`

新的选择`useDeferredValue`

`ref`作为道具`ref`，清理