• React 中useOptimistic 和 useFormStatus的用法
  • 发布于 2个月前
  • 324 热度
    1 评论
近日,React 中引入了两个实验性 Hooks:useOptimistic 和 useFormStatus,下面就分别来这两个 Hooks 都有什么用处!

useOptimistic
实验性 useOptimistic Hooks 提供了一种在应用中实现乐观更新的方法。乐观更新是一种通过使应用看起来响应更快来增强用户体验的技术。在实际场景中,往往会遇到一些需要与服务器进行异步交互的情况,比如消息发送。为了提升用户体验,在这类操作中,我们通常希望优先显示新数据或新状态,而不是等待服务器返回响应后再进行更新。这样做可以让用户立即感知到自己的操作已经被执行,降低等待时间和不确定性。

useOptimistic 钩子就是为了支持这种优化而设计的。当组件通过该钩子创建一个新状态时,可以指定一个函数,用于在每次更新状态时生成一个新的状态数组。这个函数可以在新状态中添加一些临时数据,比如正在发送的消息等。同时,将这些临时数据展示给用户,使其可以及时地感知到自己的操作已经被执行,从而提高交互体验。

来看下面的例子:
import { experimental_useOptimistic as useOptimistic } from 'react';
import { send } from './_actions.js';
//堆代码 duidaima.com 
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>
  );
}
这段代码实现了消息展示和发送功能。
1.首先定义了一个名为Thread的组件,其接收一个名为messages的属性作为输入,用于展示当前线程所有消息。
2.接下来,通过useOptimistic钩子,创建了一个名为optimisticMessages的新状态和一个名为addOptimisticMessage的回调函数,用于在表单提交前更新消息列表,并支持乐观地添加一条新消息到列表中,同时会显示"Sending..."字样,表示正在发送中。
3.最后,返回了包含了消息列表和消息发送表单的元素。其中,使用了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 对象。这是理解其行为的一种好方法,但实际的实现细节未来可能会有所改变。
用户评论