React并发渲染的三个实战案例
使用React 18 startTransition API优化性能
React团队最近宣布了React 18的计划，带来了许多酷炫的新功能，如自动批处理、新的Suspense SSR架构，以及利用并发渲染的新API（如startTransition API）。
过去几年，React团队一直在致力于支持并发渲染的主要功能，这些功能将对用户体验和开发过程产生显著影响。
关于React startTransition API
新的React startTransition API将帮助您的应用程序更加响应迅速，即使在进行大型屏幕更新时也是如此。通过这个新API，您可以通过将特定更新标记为"transitions"来显著改善用户交互。React将让您在状态转换期间提供视觉反馈，并在转换进行时保持浏览器响应。
案例#1 — 搜索宝可梦
我构建了一个可以搜索所有宝可梦并获取它们详细信息的小屏幕。这个列表相当庞大，搜索输入感觉有些卡顿。
为什么搜索如此卡顿？
卡顿的原因是因为我们在每次按键时渲染了大量的宝可梦。初始渲染约有1300个宝可梦。当React将新状态渲染到DOM时，与UI的交互完全被阻塞。
解决方案
通过使用startTransition API，我们可以告诉React：“渲染用户输入比更新列表更重要，请暂停渲染列表，专注于渲染用户刚刚按下的新按键！”
我们进行了以下更改：
- 使用新的
ReactDOM.createRoot替代ReactDOM.render - 将文本状态拆分为两个不同的状态：
text和searchQuery - 使用
useTransition钩子获取startTransition和isPending - 用
startTransition包装setSearchQuery语句 - 使用
isPending状态在搜索输入附近显示优雅的加载器
结果：现在React知道渲染用户输入比渲染列表更重要，用户体验更加流畅自然。
案例#2 — 苹果股票
我构建了一个可以查看苹果多年股票走势的屏幕，使用了AirBnb优秀的可视化库visx中的BrushChart。
问题：滑块移动时出现卡顿，因为滑块变化导致大量数据重新渲染，阻塞了后续用户滑块变化的绘制。
解决方案：我们同样用startTransition函数包装了setStock语句。
结果：滑块移动变得流畅。
案例#3 — 导航
我构建了一个可以在宝可梦和苹果股票之间导航的屏幕。
问题：点击"APPLE STOCK"选项卡时出现延迟，因为React在点击该选项卡时渲染长股票列表，阻塞了高亮显示的绘制。
解决方案：我们更改了股票组件的useEffect，告诉React：“该列表的初始渲染不如高亮活动选项卡重要！”
总结
对于我展示的所有示例，肯定有其他缓解方法，如虚拟化、懒加载，甚至简单的节流解决方案。尽管如此，React团队为我们提供了内置的并发渲染机制，这是其他前端库尚未构建的功能。
由Facebook的魔术师构建的强大React并发功能，为我们提供了强大的工具，帮助我们塑造UX优化的应用程序和服务，优化性能。
本文中的所有示例都可以在Github或Codesandbox上找到。