近日，React 中引入了两个实验性 Hooks：useOptimistic 和 useFormStatus，下面就分别来这两个 Hooks 都有什么用处！
useOptimistic
实验性 useOptimistic Hooks 提供了一种在应用中实现乐观更新的方法。乐观更新是一种通过使应用看起来响应更快来增强用户体验的技术。
在实际场景中，往往会遇到一些需要与服务器进行异步交互的情况，比如消息发送。为了提升用户体验，在这类操作中，我们通常希望优先显示新数据或新状态，而不是等待服务器返回响应后再进行更新。这样做可以让用户立即感知到自己的操作已经被执行，降低等待时间和不确定性。
useOptimistic 钩子就是为了支持这种优化而设计的。当组件通过该钩子创建一个新状态时，可以指定一个函数，用于在每次更新状态时生成一个新的状态数组。这个函数可以在新状态中添加一些临时数据，比如正在发送的消息等。同时，将这些临时数据展示给用户，使其可以及时地感知到自己的操作已经被执行，从而提高交互体验。
来看下面的例子：
import { experimental_useOptimistic as useOptimistic } from 'react';
import { send } from './_actions.js';
export function Thread({ messages }) {
const [optimisticMessages, addOptimisticMessage] = useOptimistic(
messages,
(state, newMessage) => [...state, { message: newMessage, sending: true }],
);
const formRef = useRef();
return (
<div>
{optimisticMessages.map((m) => (
<div>
{m.message}
{m.sending ? 'Sending...' : ''}
</div>
))}
<form
action={async (formData) => {
const message = formData.get('message');
formRef.current.reset();
addOptimisticMessage(message);
await send(message);
}}
ref={formRef}
>
<input type="text" name="message" />
</form>
</div>
);
}这段代码实现了消息展示和发送功能。
- 首先定义了一个名为Thread的组件，其接收一个名为messages的属性作为输入，用于展示当前线程所有消息。
- 接下来，通过useOptimistic钩子，创建了一个名为optimisticMessages的新状态和一个名为addOptimisticMessage的回调函数，用于在表单提交前更新消息列表，并支持乐观地添加一条新消息到列表中，同时会显示"Sending..."字样，表示正在发送中。
- 最后，返回了包含了消息列表和消息发送表单的元素。其中，使用了Array.map()方法遍历optimisticMessages状态，渲染出每一条消息以及可能的"Sending..."字样。表单元素则使用<input>标签定义文本输入框，将用户输入的消息内容传递给send()方法，并且当表单提交时，调用了addOptimisticMessage()回调函数，将输入的消息添加到消息列表中进行展示，并在待发送状态时显示"Sending..."字样。
这就是上面提到的乐观更新，即在消息发送过程中可以先预期显示该条消息，这样可以使用户的操作感受更加流畅。
useFormStatus
实验性 useFormStatus Hook 可以在表单操作中使用，它提供了 pending 属性。
import { experimental_useFormStatus as useFormStatus } from 'react-dom';
function Submit() {
const { pending } = useFormStatus();
return (
<input
type="submit"
className={pending ? 'button-pending' : 'button-normal'}
disabled={pending}
>
提交
</input>
);
}这段代码使用了实验性的 useFormStatus Hook，它从 react-dom 库中导入。useFormStatus Hook 可以在表单操作（比如提交、重置等）中使用，提供了一个 pending 属性，表示当前是否正在处理中。在这段代码中，将 pending 属性用于控制 <input> 元素的 className 和 disabled 属性。
除此之外，useFormStatus 还提供了 data, action, method 属性：
const {pending, data, action, method} = useFormStatus();useFormStatus Hook 可以用于实现加载指示器等功能。可以把它当作使用 useTransition Hook 实现加载状态的一种快捷方式。目前，该 Hook 仅在实验性通道中提供，会在接近稳定版本发布时分享文档。它内部实现使用 startTransition 和 context 对象。这是理解其行为的一种好方法，但实际的实现细节未来可能会有所改变。
