乐趣区

关于react.js:React-Conf-2021

jiezi

概览

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 模式

退出移动版