React 19 使用乐观钩子分解

React 一直在不断改进和发展，引入了新的方法和新的钩子，其中我非常喜欢使用 useOptimistic 钩子！

一开始我一直很困惑，为什么/什么时候才是使用它的最佳时机，TikTok 解答了我的疑惑：

几周前，我在TikTok上看视频时，点赞后立刻看到评论区显示我给视频加了个爱心。视频结尾弹出一个广告，我立刻划走了。之后我又返回去看视频，却发现爱心不见了。

这时我才意识到：
我最初点赞帖子时，它给了我反馈，说视频上的爱心标记已被识别，但是由于广告拦截功能，我滑动屏幕的速度太快，可能没有识别到我的点赞。

这或许不是TikTok的问题，但它让我意识到我该如何使用它！
这个Hook是如何工作的？
“useOptimistic是一个React Hook，它允许你以乐观的方式更新UI。”——React官方文档

它允许你执行某个操作，并且乐观地假设一切都会顺利进行。它通过用户界面执行操作，因此用户可以立即获得响应。

如果你想看代码，我已经把它放在 stackblitz 上了，这样很容易理解。

在这个视频中，你可以看到这个应用是如何工作的。即使存在延迟，最先获得点赞的两个帖子也会立即显示出来！这是因为使用了 useOptimistic hook！

请注意底部两个帖子不会立即更新——这是因为它们没有使用 useOptimistic，所以它们会等待服务器更新。

import { useOptimistic, startTransition } from "react";

需要导入optimistic hook和startTransition api。

const [optimisticPosts, addOptimisticPost] = useOptimistic(
posts,

这部分设置了一个“乐观状态”，这意味着它会在等待服务器返回真实数据之前立即更新用户界面。

// Apply the optimistic update immediately
startTransition(() => {
addOptimisticPost(postId);
});

startTransition API 告诉 React：“嘿，立即更新 UI，但不要将此 API 调用设为最高优先级，先执行其他操作，因为用户已经获得了 UI 反馈，之后我们可以将此 API 调用作为最低优先级处理。” 这样可以防止 UI 阻塞其他重要更新，确保流畅的用户体验。

现在，如果您愿意，您可以添加一些额外的功能，以便在出现故障时触发。这样，我们就不会显示错误状态，例如，如果 API 失败，就不会移除“点赞”标记。

（这个gif图不太容易看清，如果你想看视频，可以在这条推特帖子里找到：https://x.com/DThompsonDev/status/1884821001671749971）

说实话，制作和尝试这个真的很有趣！
如果你觉得这篇文章对你理解 Optimistic hooks 的用法有帮助，或者想听听我接下来应该讲解哪些技术细节，请告诉我！

请在各大平台关注我：DThompsonDev

菜单