服务器组件(RSC)：经过多年的开发，React 引入了服务器组件，而不是需要借助Next.js

动作(Action)：Action也将彻底改变我们与 DOM 元素的交互方式。

增强的 hooks：引入了很多新 hooks，将改变我们的编码体验。

总结一下 19.0.0-Beta 版本的发布的特性就是：

• 一个 Actions
• 三个新 hook
• 一个新 API
• ref 和 context 用法更方便
• 其他支撑类更新、服务端能力更新

1.如何使用服务器组件

默认情况下，React中的所有组件都是客户端组件。只有使用 'use server'` 时，组件才是服务器组件。

我们只需要将 'use server' 添加为组件的第一行即可。这将使组件成为服务器组件。它不会在客户端运行，只会在服务器端运行。

'use server';export default async function requestUsername(formData) {const username = formData.get('username');if (canRequest(username)) {// ...return 'successful';}return 'failed';
}

2.动作（Action）

什么是Action

使用异步转换的函数被称为Action（动作）。Action自动管理数据的提交：

1. Pending状态：Action 提供了一个 state

• • 请求开始时，代表对应的状态 -pending状态

• • 请求结束时，状态自动重置

1. Optimistic更新：Action支持新的useOptimistichook，因此我们可以在请求提交时向用户显示即时反馈。

1. 错误处理：Action提供错误处理，因此我们可以在请求失败时显示Error Boundary，并自动恢复Optimistic更新为其原始值。

1. 增强表单操作：

1. 元素支持将函数传递给 action 和 formAction props。

• • 传递给action props的函数默认使用Action机制，并在提交后自动重置表单

Action将允许我们将action与<form/>标签 集成。简单来说，我们将能够用action替换 onSubmit 事件。

在使用Action之前

在下面的代码片段中，利用 onSubmit事件，在表单提交时触发搜索操作。

<form onSubmit={search}><input name="query" /><button type="submit">查询</button>
</form>

使用Action之后

随着服务器组件的引入， Action可以在服务器端执行。在 JSX 中，我们可以删除 <form/> 的 onSubmit 事件，并使用 action 属性。action 属性的值将是一个提交数据的方法，可以在客户端或服务器端提交数据。

我们可以使用Action执行同步和异步操作，简化数据提交管理和状态更新。为的是使处理表单和数据更加容易。

"use server"const submitData = async (userData) => {const newUser = {username: userData.get('username'),email: userData.get('email')}console.log(newUser)
}
const Form = () => {return <form action={submitData}><div><label>用户名</label><input type="text" name='username'/></div><div><label>邮箱</label><input type="text" name="email" /></div><button type='submit'>提交</button></form>
}export default Form;

在上面的代码中，submitData 是服务器组件中的Action。form 是一个客户端组件，它使用 submitData 作为Action。submitData 将在服务器上执行。

3.Hooks

在 React 19 中，我们使用 useMemo、forwardRef、useEffect 和 useContext 的方式将会改变。这主要是因为将引入一个新的 hook，即 use。

useMemo()

之前的写法

import React, { useState, useMemo } from 'react';function ExampleComponent() {const [inputValue, setInputValue] = useState('');// 记住输入框是否为空的检查结果const isInputEmpty = useMemo(() => {console.log('检测输入框是否为空');return inputValue.trim() === '';}, [inputValue]);return (<div><inputtype="text"value={inputValue}onChange={(e) => setInputValue(e.target.value)}/><p>{isInputEmpty ? 'Input 为空' : 'Input有值'}</p></div>);
}export default ExampleComponent;

之后的写法

import React, { useState } from 'react';function ExampleComponent() {const [inputValue, setInputValue] = useState('');const isInputEmpty = () => {console.log('检测输入框是否为空');return inputValue.trim() === '';});return (<div><inputtype="text"value={inputValue}onChange={(e) => setInputValue(e.target.value)}/><p>{isInputEmpty ? 'Input 为空' : 'Input有值'}</p></div>);
}export default ExampleComponent;

我们可以看到在 React19 之后，我们不再需要自己来做记忆化，React19 将会在后台自动完成。

forwardRef()

ref 现在将作为props传递而不是使用 forwardRef() hook。

这将简化代码。因此，在 React19 之后，我们不需要使用 forwardRef()。

之前的写法

import React, { forwardRef } from 'react';const ExampleButton = forwardRef((props, ref) => (<button ref={ref}>{props.children}</button>
));

之后的写法

ref 可以作为属性传递。不再需要 forwardRef()。

import React from 'react';const ExampleButton = ({ ref, children }) => (<button ref={ref}>{children}</button>
);

新的 use() hook

这个 hook 将简化我们如何使用 promises、async 代码和 context。

const value = use(resource);

示例1：接收async函数

下面的代码是使用 use hook 进行 fetch 请求的示例：

import { use } from "react";const fetchUsers = async () => {const res = await fetch("远程地址");return res.json();};const UsersItems = () => {const users = use(fetchUsers());return (<ul>{users.map((user) => (<div key={user.id} ><h2>{user.name}</h2><p>{user.email}</p></div>))}</ul>);
}; 
export default UsersItems;

• fetchUsers进行远程数据请求

• 我们使用usehook 执行fetchUsers，而不是使用useEffect或useStatehooks。

• usehook 的返回值是users，其中包含GET请求的响应（users）。

• 在return中，我们使用users进行对应信息的渲染处理。

示例2：接收context对象

我们以后可以直接将context对象传人到use()中，从而达到将context引入组件的目的。而不需要useContext()了。

使用createContext定义全局变量

这里我们定义

import { createContext, useState, use } from 'react';const ThemeContext = createContext();const ThemeProvider = ({ children }) => {const [theme, setTheme] = useState('light');const toggleTheme = () => {setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));};return (<ThemeContext.Provider value={{ theme, toggleTheme }}>{children}</ThemeContext.Provider>);
};

在组件中使用use()获取context信息

const Card = () => {// use Hook()const { theme, toggleTheme } = use(ThemeContext);return (// 基于theme/toggleTheme 渲染页面或者执行对应的操作);
};const Theme = () => {return (<ThemeProvider><Card /></ThemeProvider>);
};export default Theme

上面代码中有几点需要简单解释一下：

• ThemeProvider负责提供context。

• Card是我们将消费context的组件。为此，我们将使用新的 hookuse来消费context。

useFormStatus() hook

在 React19 中，我们还有新的 hooks 来处理表单状态和数据。这将使处理表单更加流畅和简单。将这些 hooks 与 Action结合使用将使处理表单和数据更加容易。

React19 中的这个新 hook 将帮助我们更好地控制你创建的表单。它将提供关于上次表单提交的状态信息。

• useFormStatus Hook 必须在渲染在 <form> 内部的组件中调用。
• useFormStatus 只会返回父级 <form> 的状态信息，而不会返回同一组件或其子组件中任何其他 <form> 的状态信息。

基础语法

这是它的语法：

const { pending, data, method, action } = useFormStatus();

或者简化的版本：

const { status } = useFormStatus()

• pending：如果表单处于待处理状态，则为true，否则为false。

• data：一个实现了FormData接口的对象，其中包含父<form>提交的数据。

• method：HTTP方法 – GET，或 POST。

• • 默认情况下将是 GET。

• action：一个函数引用。

案例展示

useFormStatus是从react-dom库中导出的

import { useFormStatus } from "react-dom";function Submit() {const status = useFormStatus();return <button disabled={status.pending}>{status.pending ? '正在提交...' : '提交完成'}</button>;
}// ==== 父组件 ==引入Submit ====const formAction = async () => {// 模拟延迟 3 秒await new Promise((resolve) => setTimeout(resolve, 3000));
}const FormStatus = () => {return (<form action={formAction}><Submit /></form>);
};export default FormStatus;

解释一下：

• Submit通过useFormStatus可以获取此时from表单的提交状态，并基于一些状态渲染一些辅助信息

• formAction是执行异步提交的处理

在上面的代码中，当表单提交时，从 useFormStatus hook 我们将获得一个 pending 状态。

• 当pending为true时，UI 上会显示 "正在提交..." 文本。

• 一旦pending为false，"正在提交..." 文本将被更改为 "提交完成"。

当我们想要知道表单提交的状态并相应地显示数据时，它会很有用。

useFormState() hook

React19 中的另一个新 hook 是 useFormState。它允许我们根据表单提交的结果来更新状态。

语法

这是它的语法：

const [state, formAction] = useFormState(fn, initialState, permalink?);

• fn：表单提交或按钮按下时要调用的函数。

• initialState：我们希望状态初始值是什么。它可以是任何可序列化的值。在首次调用操作后，此参数将被忽略。

• permalink：这是可选的。一个URL或页面链接，如果fn将在服务器上运行，则页面将重定向到permalink。

这个 hook 将返回：

• state：初始状态将是我们传递给initialState的值。

• formAction：一个将传递给表单操作的操作。此操作的返回值将在状态中可用。

案例展示

import { useFormState} from 'react-dom';const FormState = () => {const submitForm = (prevState, queryData) => {const name =  queryData.get("username");console.log(prevState); // 上一次的from 的state if(name === '柒八九'){return {success: true,text: "前端开发者"}}else{return {success: false,text: "Error"}}}const [ message, formAction ] = useFormState(submitForm, null)return <form action={formAction}><label>用户名</label><input type="text" name="username" /><button>提交</button>{message && <h1>{message.text}</h1>}</form>
}export default FormState;

解释一下

• submitForm是负责表单提交的方法。这是一个Action。

• 在 submitForm中，我们正在检查表单的值。

• • prevState:初始状态将为null，之后它将返回表单的prevState。

• • queryData:用于获取此次操作中from表单中对应key的值

useOptimistic() hook

useOptimistic – React 中文文档

useOptimistic 也新发布的Hook，它允许我们在异步操作时显示不同的状态。主要目的是让我们可以在等待异步操作结果的时候，先假设操作成功并更新状态，然后再根据实际结果来确认状态。

这个 hook 将帮助增强用户体验，并应该导致更快的响应。这对于需要与服务器交互的应用程序非常有用。

语法

以下是 useOptimistic hook 的语法：

const [ optimisticX, addOptimisticX] = useOptimistic(state, updatefn)

例如，当响应正在返回时，我们可以显示一个optimistic状态，以便让用户获得即时响应。一旦服务器返回实际响应，optimistic状态将被替换。

import { useOptimistic } from 'react';function AppContainer() {const [optimisticState, addOptimistic] = useOptimistic(state,// 更新函数(currentState, optimisticValue) => {// 使用乐观值// 合并并返回新 state});
}

其中：

这个状态被称为“乐观”状态是因为通常用于立即向用户呈现执行操作的结果，即使实际上操作需要一些时间来完成

参数

• state：初始时和没有挂起操作时要返回的值。
• updateFn(currentState, optimisticValue)：一个函数，接受当前 state 和传递给 addOptimistic 的乐观值，并返回结果乐观状态。它必须是一个纯函数。updateFn 接受两个参数：currentState 和 optimisticValue。返回值将是 currentState 和 optimisticValue 的合并值。

返回值

• optimisticState：结果乐观状态。除非有操作挂起，否则它等于 state，在这种情况下，它等于 updateFn 返回的值。
• addOptimistic：触发乐观更新时调用的 dispatch 函数。它接受一个可以是任何类型的参数 optimisticValue，并以 state 和 optimisticValue 作为参数来调用 updateFn。