本篇文章给大家分享《React 19 中的新增功能》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

行动

react 应用程序中的一个常见用例是执行数据突变，然后更新状态作为响应。例如，当用户提交表单以更改其姓名时，您将发出 api 请求，然后处理响应。过去，您需要手动处理挂起状态、错误、乐观更新和顺序请求。

例如，您可以在 usestate 中处理挂起和错误状态：

// before actions
function updatename({}) {
  const [name, setname] = usestate("");
  const [error, seterror] = usestate(null);
  const [ispending, setispending] = usestate(false);

  const handlesubmit = async () => {
    setispending(true);
    const error = await updatename(name);
    setispending(false);
    if (error) {
      seterror(error);
      return;
    } 
    redirect("/path");
  };

  return (
    

       setname(event.target.value)} />
      
        update
      
      {error && 
{error}
}
    
  );
}

在 react 19 中，我们添加了对在转换中使用异步函数的支持，以自动处理挂起状态、错误、表单和乐观更新。

例如，您可以使用 usetransition 为您处理挂起状态：

// using pending state from actions
function updatename({}) {
  const [name, setname] = usestate("");
  const [error, seterror] = usestate(null);
  const [ispending, starttransition] = usetransition();

  const handlesubmit = () => {
    starttransition(async () => {
      const error = await updatename(name);
      if (error) {
        seterror(error);
        return;
      } 
      redirect("/path");
    })
  };

  return (
    

       setname(event.target.value)} />
      
        update
      
      {error && 
{error}
}
    
  );
}

异步转换将立即将 ispending 状态设置为 true，发出异步请求，并在任何转换后将 ispending 切换为 false。这使您可以在数据更改时保持当前 ui 的响应能力和交互性。

笔记

按照惯例，使用异步转换的函数称为“操作”。
操作会自动为您管理提交数据：

挂起状态：操作提供一个挂起状态，该状态在请求开始时启动，并在提交最终状态更新时自动重置。
乐观更新：操作支持新的 useoptimistic 挂钩，因此您可以在提交请求时向用户显示即时反馈。
错误处理：操作提供错误处理，以便您可以在请求失败时显示错误边界，并自动将乐观更新恢复为其原始值。
表单：

// using  actions and useactionstate
function changename({ name, setname }) {
  const [error, submitaction, ispending] = useactionstate(
    async (previousstate, formdata) => {
      const error = await updatename(formdata.get("name"));
      if (error) {
        return error;
      }
      redirect("/path");
      return null;
    },
    null,
  );

  return (
    
      
      update
      {error && 
{error}
}
    
  );
}

在下一节中，我们将详细介绍 react 19 中的每个新 action 功能。

新钩子：useactionstate

为了使操作的常见情况更容易，我们添加了一个名为 useactionstate 的新钩子：

const [error, submitaction, ispending] = useactionstate(
  async (previousstate, newname) => {
    const error = await updatename(newname);
    if (error) {
      // you can return any result of the action.
      // here, we return only the error.
      return error;
    }

    // handle success
    return null;
  },
  null,
);

useactionstate 接受一个函数（“action”），并返回一个包装的 action 来调用。这是有效的，因为动作是组合的。当调用被包装的 action 时，useactionstate 会返回该 action 的最后结果作为数据，并将该 action 的挂起状态作为挂起。

笔记

react.useactionstate 以前在 canary 版本中称为 reactdom.useformstate，但我们已重命名它并弃用了 useformstate。

请参阅#28491 了解更多信息。
有关更多信息，请参阅 useactionstate 的文档。

react dom：

操作

actions 还与 react 19 的 react-dom 的新 功能集成。我们添加了对传递函数作为 、 和 元素的 action 和 formaction 属性的支持，以使用 actions 自动提交表单：

当 action 成功时，react 会自动重置不受控制组件的表单。如果您需要手动重置 ，可以调用新的 requestformreset react dom api。

有关更多信息，请参阅 、 和

的 react-dom 文档。

react dom：新挂钩：useformstatus

在设计系统中，通常会编写需要访问其所在 信息的设计组件，而无需将 props 深入到组件。这可以通过 context 来完成，但为了使常见情况更容易，我们添加了一个新的钩子 useformstatus:

import {useformstatus} from 'react-dom';

function designbutton() {
  const {pending} = useformstatus();
  return 

}

useformstatus 读取父级 的状态，就好像表单是上下文提供者一样。

有关更多信息，请参阅 useformstatus 的 react-dom 文档。

新钩子：useoptimistic

执行数据突变时的另一种常见 ui 模式是在异步请求正在进行时乐观地显示最终状态。在 react 19 中，我们添加了一个名为 useoptimistic 的新钩子，以简化此操作：

function changename({currentname, onupdatename}) {
  const [optimisticname, setoptimisticname] = useoptimistic(currentname);

  const submitaction = async formdata => {
    const newname = formdata.get("name");
    setoptimisticname(newname);
    const updatedname = await updatename(newname);
    onupdatename(updatedname);
  };

  return (
    
      
your name is: {optimisticname}
      

        change name:
        
      
    
  );
}

useoptimistic 钩子将在 updatename 请求正在进行时立即渲染 optimisticname。当更新完成或出错时，react 会自动切换回 currentname 值。

有关更多信息，请参阅 useoptimistic 的文档。

新api：使用

在 react 19 中，我们引入了一个新的 api 来读取渲染中的资源：use。

例如，您可以使用 use 来读取 promise，react 将 suspend 直到 promise 解决：

import {use} from 'react';

function comments({commentspromise}) {
  // `use` will suspend until the promise resolves.
  const comments = use(commentspromise);
  return comments.map(comment => 
{comment}
);
}

function page({commentspromise}) {
  // when `use` suspends in comments,
  // this suspense boundary will be shown.
  return (
    loading...