上一篇文章我们介绍了相关的内容《React 19 超强新特性，今天就来一探究竟吧（一）》，今天我们继续介绍剩下的内容。
A New API — use
在React 19中，use被重新分类到了API中，从而成为一个新的API。use主要用于在组件中读取资源的值，这些资源可以是Promise或者是Context。
基本用法
import { use } from 'react';
function MessageComponent({ messagePromise }) {
const message = use(messagePromise);
const theme = use(ThemeContext);
// …
}这个API的设计初衷是为了更高层次的框架，如 Next.js。比如，在Next.js的服务端组件中进行数据获取时，推荐使用async...await而不是use。如果数据获取发生在客户端组件中，建议在服务端组件中创建 Promise 并将其作为 props 传递给客户端组件。
与Suspense边界一起使用
use还可以和Suspense边界一起使用。如果调用use的组件被包裹在一个Suspense边界内，那么在Promise解析之前，指定的回退UI将会显示。一旦Promise解析完成，回退UI会被返回的数据替代。如果Promise被拒绝，最近的错误边界的回退UI将会显示。
这种设计让开发者在处理异步数据时更加得心应手，尤其是在构建复杂的用户界面时。通过将use与Suspense结合使用，可以显著简化异步状态管理，提高代码的可读性和维护性。
简化的ref和context用法
如果你主要使用React的客户端功能，那么本节讨论的变化将会特别引起你的兴趣。
Ref舍弃了forwardRef
还记得被forwardRef支配的恐惧吗？在React 19中，我们终于可以舍弃forwardRef了。从现在开始，refs可以直接作为props传递。
例如，我们有一个函数组件TextInput，这是一个简单的输入框，可以接受一个placeholder属性用于占位符文本。现在，我们希望在父组件中获取这个输入框的引用，以便在需要时聚焦它。下面是如何实现的：
import React, { useRef } from 'react';
// 定义一个函数组件TextInput
function TextInput({ placeholder, ref }) {
return <input placeholder={placeholder} ref={ref} />;
}
// 父组件
function ParentComponent() {
// 创建一个ref来存储输入框的引用
const inputRef = useRef(null);
// 在某个事件处理器中，获取输入框的引用并聚焦它
const focusInput = () => {
inputRef.current.focus();
};
return (
<div>
{/*
将inputRef传递给TextInput组件，
允许在TextInput内部使用ref
*/}
<TextInput placeholder="请输入你的名字" ref={inputRef} />
<button onClick={focusInput}>聚焦输入框</button>
</div>
);
}
export default ParentComponent;
这样写是不是比使用forwardRef更加轻松了？
作为Provider的Context
从React 19开始，开发者可以直接使用<Context>作为provider，而不再需要使用<Context.Provider>。
假设我们有一个ThemeContext用于管理主题信息。在React 19中，我们可以像这样使用<ThemeContext>作为provider：
import React, { createContext } from 'react';
// 创建一个主题context
const ThemeContext = createContext('');
// 作为主题provider的App组件
function App({ children }) {
return (
<ThemeContext value="dark">
{children}
</ThemeContext>
);
}
未来，Context.Provider将被弃用并移除。
其他更新
这个版本还包含了各种支持性功能和对服务器端能力的增强，尽管这些功能在纯客户端React开发中不常用，因此我们简要总结如下：
服务器组件和服务器动作
服务器组件和服务器动作正在成为稳定功能。这些概念对于熟悉Next.js/Remix的开发者来说已经耳熟能详，但对于不使用这些框架的开发者来说则不太常见。
useDeferredValue更新
useDeferredValue已更新，增加了第二个参数，用于可选地指定初始值。新的用法如下：
const value = useDeferredValue(deferredValue, initialValue?);直接在React代码中编写文档元数据
现在可以直接在React代码中编写文档元数据，即在页面组件中编写<title>、<link>和<meta>标签时，它们会自动添加到应用的<head>中：
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代码中编写样式表
同样地，现在也支持在React代码中直接编写样式表标签，即<link rel="stylesheet" href="...">标签会自动添加到<head>中。
直接在React代码中编写脚本标签
支持编写<script async="" src="...">标签，这些标签也会自动添加到<head>中。
资源预加载支持
支持资源预加载，这些预加载的资源也会自动添加到<head>中：
import { prefetchDNS, preconnect, preload, preinit } from 'react-dom';
function MyComponent() {
preinit('https://.../path/to/some/script.js', { as: 'script' }); // 立即加载并执行此脚本
preload('https://.../path/to/font.woff', { as: 'font' }); // 预加载此字体
preload('https://.../path/to/stylesheet.css', { as: 'style' }); // 预加载此样式表
prefetchDNS('https://...'); // 当你可能不会实际请求来自此主机的任何内容时
preconnect('https://...'); // 当你将请求某些内容但不确定具体是什么时
}总结
React 19不仅在客户端开发方面带来了便利，还增强了服务器端功能。这些新功能使得在React代码中编写文档元数据、样式表、脚本和预加载资源变得更加简单和直观，进一步提升了开发体验。
对于那些希望充分利用React 19新功能的开发者，掌握这些更新内容将是非常有帮助的。让我们一起期待React带来的更多创新和改进吧！
本文暂时没有评论，来添加一个吧(●'◡'●)