OverviewReactConf2021官方视频回顾【英文】主要看点React18新特性未来展望生态内容React18新特性Suspense原创特性Concurrent新向后兼容升级方案自动批处理批量更新startTransition&useDeferredValueuseIdStreamingSSRwithSuspenseuseSyncExternalStoreSuspense描述一些用法这里的场景。比如在Netflix的SSR架构中，Suspense解决了用户无法及时交互的问题。React18Concurrent中新增的SuspenseSSR架构是一种处理React升级的处理机制，减少升级带来的代码更新。目前已从并发模式更新为并发功能。ConcurrentFeature的特点是这些新特性只有在需要的时候才会自动处理。自动批处理自动合并和批处理。为hook批处理提供方便。constonClick=()=>{//渲染2次->1次setCount(count+1);setIndex(index+1);}startTransitionstartTransition将事件划分为非紧急事件，将性能留给更高优先级的事件。//类比由事件循环或节流处理//ShowwhatyoutypedsetInputValue(input);//ShowtheresultafterawhilesetTimeout(()=>{setSearchQuery(input);});需要注意的区别是：startTransition的更新会早于setTimeout。如果这个阶段setTimeout耗时很多，就不能被其他优先级插入。在使用慢速渲染时，使用startTransition来提高执行效率。真实世界示例：为慢速渲染添加startTransition慢速网络，通常结合Suspense，参考新特性：startTransitiontransitionsuseDeferredValue在处理防抖方面类似于debounce，但更多的是在react层放弃执行空间。直观的感受是释放了一部分执行空间后，实际执行效率更高。但是也有缺点，就是有高频更新的时候，参考usedeferredvaluedeferring-a-value先看ReactuseDeferredValueHookuseIdforSSR下server的unstablerandom:Generatingrandom/uniqueattributesserver-sidethatdon'tbreakclient-sidemounting这让我想起了snowFlakeuseSyncExternalStoreuseMutableSource→useSyncExternalStoreFutureForesightReactForget--ReactwithMemos缓存组件ReactForgetReactForget的解决方案是使用编译器分析源代码并将数据和函数都放入内置的memoCache[]来自自动备忘录，减少冗余渲染生态内容，平滑升级React18ReactDevtool新的ReactdocRelay和GraphQLReactNativeReactDevTool描述了ReactDevTool对hooks的升级，以及如何实现hooks中不同状态名的获取。快速试用React18发行版npminstallreact@rcreact-dom@rcreplaceAPIcreateRoot//beforeconstcontainer=document.getElementById('root');ReactDOM.render(
