447 - 《笔记:React Unpacked:A Roadmap to React 19》
发布于 2024年6月12日
2024.08.26,发现图裂了,我找时间修下。。
读 https://www.youtube.com/live/T8TZQ6k4SLE?t=10112s 做的笔记,以及一些自己的想法。这个演讲很好,作者通过一个例子把 React 的部分新特性都串起来了,有时间的推荐直接看视频。
这是之前的写法,当用户在点击「加入购物车」时,会执行 handleAddToCart。这里有两个问题,1)race condition,当我们多次点击按钮触发时,由于发请求是异步,先后顺序可能不能保障,尤其是在有错误场景(比如库存不足)的时候,2)写法复杂,需手动处理 error 和 pending 状态。
React 19 的 startTransition 支持了异步,可以把整个 handleAddToCart 无改动直接包进来。但这里的问题是,由于 transition 包的任务是非紧急任务,所以多次点击时,transition 内部的 pending 状态变更不会即时反馈到 UI 上。
上一个问题的解法是,用 useTransition(),其返回值包