行动
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 的响应能力和交互性。
笔记
按照惯例，使用异步转换的函数称为“操作”。
操作会自动为您管理提交数据：
挂起状态：操作提供一个挂起状态，该状态在请求开始时启动，并在提交最终状态更新时自动重置。
乐观更新：操作支持新的 useoptimistic 挂钩，因此您可以在提交请求时向用户显示即时反馈。
错误处理：操作提供错误处理，以便您可以在请求失败时显示错误边界，并自动将乐观更新恢复为其原始值。
表单：
以上就是React 19 中的新增功能的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1499314.html
微信扫一扫 
支付宝扫一扫 
