React 19 useOptimistic 撤销与冲突解决实践：事务提示-冲突合并

概览useOptimistic 可在提交前立即更新 UI，降低交互延迟感。结合撤销与冲突合并策略，在后台确认失败或产生竞态时稳定回滚或合并，保证一致性与可控性。基础用法'use client' import { useOptimistic, useState } from 'react' type Item = { id: string; text: string } export default function List() { const [items, setItems] = useState<Item[]>([]) const [optimisticItems, addOptimistic] = useOptimistic(items, (state, pending: Item) => { return [...state, pending] }) async function add(text: string) { const temp: Item = { id: crypto.randomUUID(), text } addOptimistic(temp) const ok = await submit(temp) if (!ok) { setItems((prev) => prev.filter((i) => i.id !== temp.id)) } else { setItems((prev) => [...prev, temp]) } } return ( <div> <button onClick={() => add('任务')}>添加</button> <ul> {optimisticItems.map((i) => ( <li key={i.id}>{i.text}</li> ))} </ul> </div> ) } async function submit(i: Item) { await new Promise((r) => setTimeout(r, 400)) return Math.random() > 0.2 } 撤销与冲突合并'use client' import { useOptimistic, useRef, useState } from 'react' type Change = { id: string; text: string } export function Editor() { const [base, setBase] = useState<string>('') const [optimistic, apply] = useOptimistic(base, (state, change: Change) => change.text) const queue = useRef<Change[]>([]) async function save(next: string) { const change: Change = { id: crypto.randomUUID(), text: next } apply(change) queue.current.push(change) const ok = await commit(change) if (!ok) { // 合并策略：回退到最新成功版本 const last = queue.current.at(-2) setBase(last ? last.text : base) } else { setBase(next) } } return ( <div> <textarea defaultValue={base} onBlur={(e) => save(e.target.value)} /> <p>预览：{optimistic}</p> </div> ) } async function commit(c: Change) { await new Promise((r) => setTimeout(r, 500)) return true } 治理要点对失败场景提供撤销或回滚保障，避免状态撕裂。合并策略以最新成功提交为基线，减少竞态污染。与 Server Actions 协作，将幂等与去重纳入后端保障。验证与指标React：19.0+；Next.js：15.0+即时反馈：按钮与文本在 100–200ms 内出现乐观更新；失败可在 1s 内回滚