React 18 Alpha 版发布！现在该做什么？

你好！

他们让我们在 Suspense 中停留了很长时间，但是 HECK React 开发人员可以使用一些新功能！！
最好的部分是：升级后的几乎所有好处都不需要进行重大的代码更改。

新的 Root API

React 总是需要某种根。你可能经常在应用程序的顶层看到类似这样的代码：

import ReactDOM from 'react-dom';
import App from 'App';

ReactDOM.render(<App />, document.getElementById('root'));

很正常吧？没错。ReactDOM.render()现在它被称为Legacy Root API。它的工作方式与 React 17 完全相同。你仍然可以保留它，但它最终会被弃用。

新的 Root API看起来有些不同：

import ReactDOM from 'react-dom';
import App from 'App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

非常相似！您可以用它ReactDOM.createRoot来代替旧方法。

随着这一变化，会发生以下几件事：

• 该hydrate方法已消失，现在成为createRoot
• 渲染回调已消失（现在可以作为 prop 传入<App />或任何你提供给根的内容）

如果您不使用这两个函数，则无需担心它们的变更。如果您想了解更多详细信息，这里有一些来自 React 核心团队的代码变更示例。

通过切换到新的 Root API，您将自动获得 React 18 附带的全新开箱即用的改进！

只需进行此更改即可将客户端升级到 React 18。如果您只使用 React 客户端，则无需更改，可以直接跳至下面的安装部分！如果您使用服务器端 React 或想了解更多关于 Suspense 的信息，请继续阅读。

悬念

抛开双关，我想我们都对 Suspense 终于全面支持感到无比兴奋。React 16 从技术上来说支持它，但从未达到完全支持，而且不太容易理解。

那么 Suspense 到底是什么？它是一组功能，允许在状态转换之前等待数据解析（又名延迟转换），减少数据加载时的 UI 冲突（又名占位符限制），并通过按顺序流式传输来协调一组组件的外观（又名 SuspenseList）。

如果您以前使用过 Suspense，您可能会看到一些“Legacy Suspense”行为发生变化，但如果您想第一次尝试它，总结就是您将组件包装在一个<Suspense>组件中，如下所示：

<Suspense fallback={<Loading />}>
  <SomeComponentThatSuspends />
  <SomeOtherComponent />
</Suspense>

<Loading />在这个例子中，React 会首先显示组件，然后在解析数据后将其替换<Loading />为<SomeComponentThatSuspends />和。<SomeOtherComponent /><SomeComponentThatSuspends />

我想重申这一点，因为它与以前的版本不同<Suspense />：在数据解析完成之前，组件内部的任何内容都不会被渲染！您可以在这里查看 React 核心团队使用此功能的代码示例。

并发特性

React 18 中有一些方法是完全可选的。目前并非所有方法都有文档记录，但随着版本的优化，它们将会被记录下来：

• startTransition：在重大状态转换期间保持 UI 响应。
• useDeferredValue：推迟更新应用程序中不太重要的部分。
• <SuspenseList>：协调加载指示器出现的顺序。
• 具有选择性水合的服务器端渲染：让您的应用程序加载并更快地进行交互。

这些功能的优点在于，您无需在整个应用程序中都包含它们。您可以选择仅在应用程序的某些部分使用它们，这非常便捷且灵活。

够了！如何安装？

您可以使用@alpha标签立即安装 React 18：

npm install react@alpha react-dom@alpha

Alpha 版本升级到 Beta 版本还需要几个月的时间，之后还需要更多时间才能完全稳定。您可以点击此处查看路线图的更多详情，其中还包含其他尚未实现的功能。

如果您想了解更多信息， React 工作组也对这些功能进行了一系列的问题和讨论，以及他们的公告博客文章！

下次再见！