React全新实验性Hooks：useOptimistic、useFormStatus

近日，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 对象。这是理解其行为的一种好方法，但实际的实现细节未来可能会有所改变。