React.JS v18.0发布

22-03-30 banq

最新的主要版本包括开箱即用的改进,如自动批处理、startTransition 等新 API,以及支持 Suspense 的流式服务器端渲染。

React 18中的许多功能都是建立在我们新的并发渲染器之上的,这是一个幕后的变化,释放了强大的新功能。并发React是可选的--只有当你使用并发功能时才会启用--但我们认为它将对人们构建应用程序的方式产生重大影响。

我们花了数年时间研究和开发对React并发的支持,我们还特别注意为现有用户提供一个渐进的采用路径。

并发本身并不是一个功能。它是一种新的幕后机制,使React能够同时准备多个版本的UI。你可以把并发看作是一个实现细节--它的价值在于它所解锁的功能。
React在其内部实现中使用了复杂的技术,比如优先级队列和多重缓冲。但你不会在我们的公共API中看到这些概念。
当我们设计API时,我们试图向开发者隐藏实现细节。作为一个React开发者,你专注于你想要的用户体验,而React处理如何提供这种体验。


自动批处理
批处理是指React将多个状态更新分组到一个重新渲染中,以获得更好的性能。如果没有自动批处理,我们只对React事件处理程序中的更新进行批处理。默认情况下,React不会对promises、setTimeout、本地事件处理程序或任何其他事件中的更新进行批处理。有了自动批处理,这些更新将被自动批处理。

  

Transitions
过渡transition 是React的一个新概念,用于区分紧急和非紧急更新。

立急更新反映了直接的交互,比如打字、点击、按压等等。像打字、点击或按压这样的紧急更新,需要立即响应,以符合我们对物理对象行为方式的直觉。否则他们就会感觉 "不对劲"。
然而,过渡是不同的,过渡transition更新则是将用户界面从一个视图过渡到另一个视图。因为用户并不期望在屏幕上看到每个过渡过程的中间值。

 

Suspense
在React 18中,你可以开始使用Suspense在Relay、Next.js、Hydrogen或Remix等有意见的框架中进行数据获取。使用Suspense进行特别的数据获取在技术上是可行的,但仍不建议作为一般策略。
如果组件树的某一部分还没有准备好被显示,暂停让你声明性地指定它的加载状态。

<Suspense fallback={<Spinner />}>
  <Comments />
</Suspense>


Suspense使 "UI加载状态 "成为React编程模型中的第一类声明性概念。这让我们可以在它上面建立更高层次的功能。

 

新的客户端和服务器渲染API
在这个版本中,我们利用机会重新设计了我们为客户端和服务器上的渲染所暴露的API。这些变化允许用户继续使用React 17模式下的旧API,同时升级到React 18的新API。

  • React DOM客户端

这些新的API现在都是从react-dom/client导出的。
  • createRoot。新的方法来创建一个根来渲染或卸载。使用它来代替ReactDOM.render。没有它,React 18的新功能就不能工作。
  • hydrateRoot: 新的方法来给服务器渲染的应用程序注入水分。使用它代替ReactDOM.hydrate与新的React DOM Server APIs一起使用。没有它,React 18的新功能就不能工作。

createRoot和hydrateRoot都接受一个新的选项,叫做onRecoverableError,以防你想在React从渲染或水化过程中的错误中恢复过来时得到通知,以便记录。默认情况下,React会使用reportError,或者在旧的浏览器中使用console.error。
  • React DOM服务器

这些新的API现在从react-dom/server导出,并且完全支持服务器上的流媒体Suspense。
  • renderToPipeableStream:用于Node环境下的流媒体。
  • renderToReadableStream:用于现代边缘运行环境,如Deno和Cloudflare工作者。

现有的renderToString方法继续工作,但不鼓励使用。

 

新钩子

  • useId

useId是一个新的钩子,用于在客户端和服务器上生成唯一的ID,同时避免了水化不匹配。它主要适用于与需要唯一ID的可访问性API集成的组件库。这解决了一个在React 17及以下版本中已经存在的问题,但在React 18中更加重要,因为新的流媒体服务器渲染器是如何不按顺序地提供HTML的。请看这里的文档。
  • useTransition

useTransition和startTransition让你把一些状态更新标记为不紧急。其他状态更新在默认情况下被认为是紧急的。React 将允许紧急状态更新(例如,更新一个文本输入)中断非紧急状态更新(例如,渲染搜索结果列表)。请看这里的文档
  • useDeferredValue

useDeferredValue让你推迟重新渲染树的非紧急部分。它类似于debouncing,但与之相比有一些优势。没有固定的时间延迟,所以React会在第一次渲染反映在屏幕上后立即尝试延迟渲染。延迟渲染是可中断的,不会阻止用户输入。请看这里的文档。
  • useSyncExternalStore

useSyncExternalStore是一个新的钩子,它允许外部存储支持并发读取,强制更新到存储是同步的。在实现对外部数据源的订阅时,它消除了对useEffect的需求,并推荐给任何与React外部状态集成的库。请看这里的文档。
  • useInsertionEffect

useInsertionEffect是一个新的钩子,允许CSS-in-JS库解决在渲染中注入样式的性能问题。除非你已经建立了一个CSS-in-JS库,否则我们不希望你使用这个。这个钩子将在DOM被突变后运行,但在布局效果读取新的布局之前。这解决了一个在React 17及以下版本中已经存在的问题,但在React 18中更加重要,因为React在并发渲染时向浏览器让步,给它一个重新计算布局的机会。请看这里的文档。

详细点击标题