React Conf 2021

suspense

“等待”目标代码加载，并且可以直接指定一个加载的界面（像是个 spinner），让它在用户等待的时候显示

以声明的方式来“等待”任何内容，包括数据

在编写组件的时候更加关注于获取数据和展示数据，关注点不应该放在如何获取数据以及处理数据的异常状态。suspense组件可以帮助我们更好的管理数据到UI。

通常一个组件like this

function List ({pageId}) {
  const [items, isLoading] = useData(pageId);
  
  if (isLoading) {
    return <Spinner />
  }

  return items[pageId].map(item => <li>{item}</li>)
}

在这里会遇到两个问题

第一个是在处理不同组件或者是不同的状态，isLoading的时候需要不同的处理。比如返回或者或者干脆返回null

第二个是如果要修改显示状态的时候或涉及到代码的移动。

解决办法就是只从后台获取数据

function List ({pageId}) {
  const items = useData(pageId);
  
  return items[pageId].map(item => <li>{item}</li>)
}

我们就像同步的在获取这些数据，而不考虑加载状态。

那么加载状态如何展示呢？用一个父组件来处理这些状态是十分合理的

1
2
3

<Suspense fallback={<Spinner />}>
  <List pageId={pageId} />
</Suspense>

这类似于骨架的加载状态，在JSX中当UI还没准备好时，我们去展示一个不同的东西

现在我们分开了数据获取和处理状态，这对我们工作流程有着非常积极的影响。

完全不需要考虑加载状态，直到加载状态由最近的Suspense组件决定。

<Suspense fallback={<Skeleton />}>
  <Header />
  <Suspense fallback={<ListPlaceholder />}>
    <ListLayout>
      <SpecialList pageId={pageId} />
    </ListLayout>
  </Suspense> 
</Suspense>

React18

从老版本迁移到react18十分的容易，仅仅需要少部分组件的修改，就可以使用新的特性。

React 18 RC发布预计在明年发布正式版

Server Components

在服务端执行的组件

直接获取服务端的数据

大量减少客户端的代码量

无缝地跨越客户端以及服务端

下面是迭代的计划

ReactNative

我们发现在ReactNative的线程模型的根本缺陷，在web上js是单线程运行的，而在native平台运行在多个线程上。这意味着为了在移动端提供更好的用户体验。我们需要一个能够在多个本地线程之间协调工作的模式。

我们需要并发渲染，并且渲染是可以中断我们的工作然后切换到另一个线程或者并行多个渲染任务。

网络调度程序

依赖Suspense构建的并发渲染

拓展到多个平台

多平台愿景：React会在每个平台上构建高质量的应用

一致在努力重写ReactNative架构使其是同步的，新架构已经100%。新架构支持并发渲染以及react18

ReactNative的新架构以及React18将于明年一起发布

React18体验

批处理

react18之前执行三次setState会重新渲染三次，而在react18中做了批处理的工作，使三次执行只渲染一次

Suspense on the server

快速显示内容，提升用户体验

New API

startTransition()

useTransition()

useDeferredValue()

useId()

useSyncExternalStore()

如何升级React18

1	npm install react@bate react-dom@bate

修改React.render为ReactDOM.createRoot

客户端渲染和服务端渲染

客户端渲染

服务端渲染（增强用户体验）

Suspense组件不再阻塞浏览器显示HTML流

React Dev Tool

支持hook的命名

React性能分析工具

React Without Memo

不使用memo的操作

未来可以自动为React组件添加memo

React Forget