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(, container);

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