React.JS v18.0发布

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在并发渲染时向浏览器让步，给它一个重新计算布局的机会。请看这里的文档。

详细点击标题