上一篇文章我们介绍了相关的内容《》，今天我们继续介绍剩下的内容。
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';// 定义一个函数组件TextInputfunction 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';// 创建一个主题contextconst 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带来的更多创新和改进吧！
