React Conf 2021

概览

React Conf 2021 官方视频回顾【英文】

主要的几个方面

• React18 新特性
• 未来前瞻
• 生态内容

React18 新特性

• Suspense 原特性
• Concurrent 新的向后兼容升级方案
• Automatic batching 批量更新
• startTransition & useDeferredValue
• useId
• Streaming SSR with Suspense
• useSyncExternalStore

Suspense

这里描述了一些使用场景，例如在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

useSyncExternalStore

useMutableSource → useSyncExternalStore

未来前瞻

• React Forget -- React with Memos 缓存组件

React Forget

React Forget 的解决思路是用编译器分析源代码，把数据和函数都放到内置的 memoCache[]  中来自动 memo，减少多余渲染

生态内容

• 平滑升级 React18
• React Devtool
• 新的 React doc
• Relay 和 GraphQL
• React Native

React DevTool

描述了针对 hook 升级了 React DevTool，以及如何实现 hook 中针对不同状态名称的获取。

快速尝试

目前可以尝试 React18 发布版

npm install react@rc react-dom@rc

替换 API createRoot

// before
const container = document.getElementById('root');
ReactDOM.render(<App />, container);

// after
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App/>);

推荐阅读

Concurrent UI 模式