React全新实验性Hooks：UseOptimistic、新实UseFormStatus

作者：CUGGZ 2023-05-11 08:57:49开发 前端 UseFormStatus Hook 可以用于实现加载指示器等功能。验性可以把它当作使用 UseTransition Hook 实现加载状态的新实一种快捷方式。目前，验性该 Hook 仅在实验性通道中提供，新实会在接近稳定版本发布时分享文档。验性

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

责任编辑：姜华 来源： 前端充电宝 ReactHooks

(责任编辑：休闲)