概览
React Conf 2021 官方视频回顾【英文】
主要的几个方面
React18新特性- 未来前瞻
- 生态内容
Suspense原特性Concurrent新的向后兼容升级方案Automatic batching批量更新startTransition&useDeferredValueuseIdStreaming SSR with SuspenseuseSyncExternalStore
这里描述了一些使用场景，例如在
Netfix 在SSR 架构中，通过 Suspense 解决了用户不能及时发生交互的问题。New Suspense SSR Architecture in React 18
Concurrent
一种处理
React升级的处理机制，减少升级引起的代码更新。目前由 Concurrent Mode 更新为 Concurrent Feature。Concurrent Feature的特点是仅在需要时，自动的处理这些新特性。Automatic batching
自动合并，批处理。对
hook 批处理提供了方便。const onClick = () => {
// render 2 times -> 1 times
setCount(count+1);
setIndex(index+1);
}startTransition
startTransition 将事件划分为不紧急，将性能留给优先级更高多的事件。// 类比利用 Event loop 来处理，或者利用 Throttling 来处理
// Show what you typed
setInputValue(input);
// Show the result after a while
setTimeout(() => {
setSearchQuery(input);
});
需要注意的区别是：
startTransition的更新会早于setTimeout- 如果
setTimeout这个阶段花费了大量时间，是不能被其他优先级的事情插入的
- 渲染的缓慢，利用
startTransition提高执行效率。 Real world example: adding startTransition for slow renders - 缓慢的网络，通常和
Suspense结合
New feature: startTransition
transitions
useDeferredValue
与
debounce 类似处理防抖类似，不过其更多的是在 react 层让出执行空间。直观的感受是在将一部分执行空间让出来后，实际执行的效率是更高了。但是也有个缺点，就是当存在高频更新时，类似于
debounce 处理快速更新时参考
usedeferredvalue
deferring-a-value
First Look at React useDeferredValue Hook
useId
针对
SSR 下服务端的 random 不稳定的问题：Generating random/unique attributes server-side that don't break client-side mounting
这让我想到了
snowFlake
useSyncExternalStoreuseMutableSource → useSyncExternalStore
未来前瞻
React Forget -- React with Memos缓存组件
React Forget 的解决思路是用编译器分析源代码，把数据和函数都放到内置的 memoCache[]中来自动 memo，减少多余渲染生态内容
- 平滑升级
React18 React Devtool- 新的
React doc Relay和GraphQLReact Native
描述了针对
hook 升级了 React DevTool，以及如何实现 hook 中针对不同状态名称的获取。快速尝试 目前可以尝试
React18 发布版npm install react@rc react-dom@rc替换
API createRoot// before
const container = document.getElementById('root');
ReactDOM.render(, container);
// after
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render();
推荐阅读 【React|React Conf 2021】Concurrent UI 模式
