大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！
1. 支持 Actions1.1 什么是 Actions使用 async 转换（Transitions）的函数称为 Actions，其会自动处理以下操作：
待处理状态 (Pending state)：请求开始前状态设置为 pending ，在提交最终状态更新时重置。乐观更新：支持新的 useOptimistic Hooks，开发者可以在提交请求时向用户显示乐观的即时反馈。错误处理：开发者可以在请求失败时显示错误边界，并自动将乐观更新恢复为原始值。表单：<form> 元素支持将函数传递给 action 和 formAction 属性，将函数传递给 action 属性默认启用 Actions，并在提交后自动重置表单。1.2 Actions 的典型场景React 应用的一个常见用例是执行数据变异，然后更新响应状态。例如，当用户提交表单更改姓名时将发出 API 请求，然后处理响应。以前，开发者需要手动处理 pending 状态、错误 / 乐观更新和顺序请求。例如，下面示例在 useState 中处理待处理和错误状态：
const [isPending, setIsPending] = useState(false); const [error, setError] = useState(null); const handleSubmit = async () => { setIsPending(true); const error = await updateName(name); setIsPending(false); if (error) { setError(error); return; } redirect("/path");};React 19 添加了在转换中使用 async 函数的支持以自动处理 pending 状态、错误、表单和乐观更新。 例如下面的示例中，开发者可以使用 useTransition 处理 pending 状态：
const [isPending, startTransition] = useTransition();const handleSubmit = () => { startTransition(async () => { const error = await updateName(name); if (error) { setError(error); return; } redirect("/path"); })};startTransition 会立即将 isPending 状态设置为 true，接着发出异步请求，并在完成转换后重置 isPending 为 false，从而在数据发生变化时保持当前 UI 的响应和交互。
2. 支持新的 useActionState Hooks useActionState 在 Canary 版本中被称为 useFormState，但已重命名并弃用。useActionState 的引入是为了让 Actions 的使用更加简单，其接受一个函数（Action），并返回要调用的包装后的 Action，其函数签名如下;
const [state, formAction, isPending] = useActionState(fn, initialState, permalink?);// permalink 表示包含此表单修改的唯一页面 URL 的字符串因为 Actions 是可组合的，因此当调用包装的 Action 时，useActionState 将返回 Action 的最后结果作为 data，同时将 Action 的状态设置为 pending。
function ChangeName({name, setName}) { // 这里启用 useActionState 的 Hooks const [error, submitAction, isPending] = useActionState( async (previousState, formData) => { const error = await updateName(formData.get("name")); if (error) { return error; } redirect("/path"); return null; }, null, ); return ( <form action={submitAction}> <input type="text" name="name" /> <button type="submit" disabled={isPending}>Update</button> {error && <p>{error}</p>} </form> );}当 <form> 操作成功时，React 将自动重置表单中不受控的组件。如果开发者需要手动重置 <form>，可以调用新的 requestFormReset React DOM API。当然，开发者还可以给 <form > 中的 button 等控件提供 formAction 达到同样的效果：
import {useActionState} from "react";async function increment(previousState, formData) { return previousState + 1;}function StatefulForm({}) { const [state, formAction] = useActionState(increment, 0); return ( <form> {state} <button formAction={formAction}>Increment</button> </form> )}表单状态是表单上次提交时 Action 返回的值，如果表单尚未提交则表示传递的初始状态。如果与服务器函数一起使用，useActionState 允许在水合完成之前显示服务器提交表单的响应。
3. 支持 useFormStatus HooksuseFormStatus Hooks 用于编写需要访问其所在 <form> 信息的组件（提供上次表单提交的状态信息），而无需知道组件的 props，相对 Context 的优势是非常简单：
import {useFormStatus} from "react-dom";import action from './actions';function Submit() { const status = useFormStatus(); return <button disabled={status.pending}>Submit</button>}export default function App() { return ( <form action={action}> <Submit /> </form> );}要获取状态信息，Submit 组件必须在 <form> 中渲染。Hook 返回 pending 属性等信息，该信息表示表单是否正在主动提交。
4. 支持 useOptimistic HooksuseOptimistic 是一个 React Hook，可让开发者在异步操作时显示不同的状态。其接受某个状态作为参数，并返回该状态的副本，该副本在异步操作（例如：网络请求）的持续时间内可能会有所不同。开发者需要提供一个函数，其接受当前状态和操作的输入，并返回在操作 pending 期间的乐观状态。
此状态称为 “乐观” 状态，通常用于立即向用户展示执行操作的结果，即使操作实际上并未完成。
import {useOptimistic, useState, useRef} from "react";import {deliverMessage} from "./actions.js";function Thread({messages, sendMessage}) { const formRef = useRef(); async function formAction(formData) { addOptimisticMessage(formData.get("message")); // 乐观更新 formRef.current.reset(); // 重置表单 await sendMessage(formData); // 真实同步消息到服务端 } const [optimisticMessages, addOptimisticMessage] = useOptimistic( messages,(state, newMessage) => [ ...state,{ text: newMessage, sending: true } ] ); return ( <> {optimisticMessages.map((message, index) => ( <div key={index}> {message.text} {!!message.sending && <small> (Sending...)</small>} </div> ))} <form action={formAction} ref={formRef}> <input type="text" name="message" placeholder="Hello!" /> <button type="submit">Send</button> </form> </> );}export default function App() { const [messages, setMessages] = useState([ {text: "Hello there!", sending: false, key: 1} ]); async function sendMessage(formData) { const sentMessage = await deliverMessage(formData.get("message")); setMessages((messages) => [...messages, { text: sentMessage }]); } return <Thread messages={messages} sendMessage={sendMessage} />;}在表单方面，乐观更新技术有助于提高应用的响应速度。当用户提交表单时，界面会立即更新为预期结果，而无需等待服务器响应以反映更改。
5. 支持 use开发者可以使用 use 读取一个 Promise，React 将会暂停直到 Promise resolve：
import {use} from 'react';function Comments({commentsPromise}) { // `use` 会等待 Promise resolve const comments = use(commentsPromise); return comments.map(comment => <p key={comment.id}>{comment}</p>);}function Page({commentsPromise}) { // 在 Comments 中使用 `use` 时展示这里的 <Suspense> return ( <Suspense fallback={<div>Loading...</div>}> <Comments commentsPromise={commentsPromise} /> </Suspense> )}需要注意的是，use 不支持在 render 中创建的 Promise，否则抛出警告。开发者还可以通过 use 来有条件的读取上下文：
function Heading({children}) { if (children == null) { return null; } const theme = use(ThemeContext); return ( <h1 style={{color: theme.color}}> {children} </h1> );}6.React DOM Static APIs 用于 SSGReact v19 向 react-dom/static 中添加了两个用于静态站点生成 (Static Site Generation，SSG) 的 API，包括：
prerenderprerenderToNodeStream这些 API 会等待数据加载以生成静态 HTML(Static HTML Generation) 来改进 renderToString，通知支持与 Node.js Streams 和 Web Streams 等流式环境配合使用。例如，在 Web Stream 环境中，开发者可以使用 prerender 将 React 树预渲染为静态 HTML：
import {prerender} from 'react-dom/static';async function handler(request) { const {prelude} = await prerender(<App />, { bootstrapScripts: ['/main.js'] }); return new Response(prelude, { headers: {'content-type': 'text/html'}, });}Prerender API 会等待所有数据加载完毕后再返回静态 HTML 流，而流可以转换为字符串，也可以通过流式响应发送。该 API 不支持在加载时流式传输内容，开发者可以利用现有的 React DOM 服务器渲染 API ，例如：renderToPipeableStream、renderToReadableStream 等。
import {renderToPipeableStream} from 'react-dom/server';const {pipe} = renderToPipeableStream(<App />, { bootstrapScripts: ['/main.js'], onShellReady() { response.setHeader('content-type', 'text/html'); pipe(response); }});或者下面的 renderToReadableStream：
import {renderToReadableStream} from 'react-dom/server';async function handler(request) { const stream = await renderToReadableStream(<App />, { bootstrapScripts: ['/main.js'] }); return new Response(stream, { headers: {'content-type': 'text/html'}, });}参考资料https://react.dev/blog/2024/12/05/react-19
https://react.dev/reference/react-dom/server/renderToReadableStream
https://react.dev/reference/react/useActionState
https://react.dev/reference/react/useOptimistic
https://www.linkedin.com/pulse/react-new-release-deep-dive-19-game-changing-compiler-shimanto-dvbqc
https://sourabhmk.medium.com/useactionstate-react-js-7b0f89637595
https://www.mbloging.com/post/react-19-useoptimistic-hook-what-is-useoptimistic-hook-and-everything-you-need-to-know
