React 19 中的新增功能

PHP中文网 • 2025年3月7日 07:40:19 • 编程技术 • 阅读 2

行动

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

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

// before actionsfunction 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)} />            {error && {error}
}    
  );}

登录后复制

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

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

// using pending state from actionsfunction 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)} />            {error && {error}
}    
  );}

登录后复制

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