useOptimistic介绍和使用闭坑
1. useOptimistic 和 useState有啥区别吗?
useOptimistic 是 useState 在异步交互场景的强化扩展，它允许你在异步操作完成前，先更新 UI 状态，然后等待异步操作完成。通过乐观更新机制显著优化了异步交互体验。
useOptimistic 最佳场景：
网络延迟敏感的场景（点赞、收藏、评论、表单提交---常见于移动端），需要即时视觉反馈的 UI（如购物车增减）。使用时，需要搭配useState使用，可以将其视为是state属性的强化。
2. 给我来个useOptimistic的使用示例： 比如我要实现点赞功能， 通过promise settimeout resolve模拟接口请求， 你帮我写下代码。 我需要接口返回成功和返回失败的两种结果。
注意：必须要加上startTransition。否则乐观更新数只会快速抖动，数值不变，等接口返回结果之后才更新。
startTransition 的核心作用是为更新划分优先级，原理如下：
1. 更新优先级划分
startTransition(async () => {
addOptimisticLike(1); // 高优先级更新（同步执行）
await fetchUpdate(); // 低优先级更新（异步执行）
});
2. 渲染批次控制
更新类型 | 执行方式 | 渲染批次 |
乐观更新 | 同步触发 | 立即渲染 |
实际更新 | 异步队列 | 下一帧渲染 |
3. 异步更新隔离 ：
通过 startTransition 包裹的异步流程会与乐观更新形成「渲染隔离」，这使得：
- 用户点击后立即显示 addOptimisticLike(1) 的更新
- 接口请求完成后 setLikes 的更新不会冲掉已显示的乐观状态
import { useOptimistic, useState, startTransition } from "react";const LikeButton = () => {const [likes, setLikes] = useState(0);const [optimisticLikes, addOptimisticLike] = useOptimistic(likes,(current, amount: any) => {return current + amount;});// 模拟点赞接口const likePost = async (): Promise<boolean> => {return new Promise((resolve) => {setTimeout(() => {// 随机模拟成功或失败const isSuccess = Math.random() > 0.1;resolve(isSuccess);}, 5000);});};const handleClick = async () => {// 开始显式过渡startTransition(async () => {// 立即触发乐观更新addOptimisticLike(1);try {const isSuccess = await likePost();if (!isSuccess) {addOptimisticLike(-1);alert("点赞失败，请重试");} else {// 如果成功，更新实际点赞数setLikes((prev) => {return prev + 1;});alert("点赞成功");}} catch (error) {console.error("请求失败:", error);addOptimisticLike(-1);}});};return (<div><button onClick={handleClick}>乐观点赞 ({optimisticLikes}){likes !== optimisticLikes && (<span style={{ color: "red", marginLeft: 8 }}>更新中...</span>)}</button><div style={{ marginTop: 20 }}><p>实际值: {likes}</p></div></div>);
};
export default LikeButton;