试用React 18 Alpha版

试用React 18 Alpha版

React团队最近发布了React 18的新alpha版本。这个新版本的主要新增功能是提高你的React应用程序的性能的并发功能。

你已经可以在React 18中尝试的值得注意的功能如下。

• 新的ReactDOM.createRoot() API取代了ReactDOM.render()
• 为减少渲染次数而进行的批处理改进
• 对组件的SSR支持
• 用于非紧急状态更新的startTransition API

要在你的项目中试用React 18 Alpha，你可以从NPM或Yarn安装@alpha版本。

npm install react@alpha react-dom@alpha
复制代码

如果你使用Create React App引导你的React应用，你可能会遇到由react-scripts引起的无法解决依赖性的错误，如下所示。

Could not resolve dependency:
复制代码

你可以使用 –force 标志，这样你就可以同时更新 react 和 react-dom 库。

npm install react@alpha react-dom@alpha --force
复制代码

本教程将帮助你学习React 18 Alpha中已经存在的新功能，我已经能够亲自尝试了。

ReactDOM.createRoot() API解释

ReactDOM.createRoot()方法取代了ReactDOM.render()方法，你通常使用它作为React应用程序的入口。

创建该方法是为了防止React 18的更新使你的应用程序崩溃。这个新方法还允许你使用React 18 Alpha创建一个生产构建，并与React 17比较性能。

下面是一个如何使用createRoot()方法的例子。

import React from 'react';
复制代码

const container = document.getElementById('root');
复制代码

// Create a root.
复制代码

// Render the top component to the root.
复制代码

当你更新到React 18时，当你使用.render()作为入口点时，控制台中会出现一个错误日志，告诉你改用新的Root API。

只有在你使用createRoot()方法后，你才能尝试React 18的功能。

更多信息，你可以访问createRoot讨论页，这里。

渲染的自动批处理改进

你可能已经知道，React是一个可以因状态变化而重新渲染UI的库。

例如，当你把一个任意状态的值从true改为false时，React应该通过重新渲染UI来做出 “反应”，根据你写的代码来调整你在屏幕上看到的东西。

下面的组件将根据颜色状态值渲染一个黑色或红色的标题。

function App() {
复制代码

  function handleClick() {
复制代码

  return (
复制代码

每次执行setColor()方法时，React会立即重新渲染用户界面。

批处理是React使用的机制，它将多个状态更新归入一次重新渲染。通过批处理，你将避免不必要的渲染，并优化渲染过程。

回到组件的例子，让我们添加另一个状态，当handleClick()方法被调用时被更新。

function App() {
复制代码

  return (
复制代码

如果没有批处理机制，上面的代码将在每次调用handleClick()方法时重新渲染用户界面两次。首先是更新颜色，然后是再一次更新点击次数。

然而，React 17中实现的批处理机制并不一致。当你从回调中调用状态更新方法时，批处理就不会发生。

例如，假设你在调用setColor()和setClickCount()之前先从API获取数据。批处理机制将不会启动，React会重新渲染UI两次。

function handleClick() {  fetchUserData().then(() => {    setCount(c => c + 1); // Causes a re-render!    setFlag(f => !f); // Causes a re-render!  });}
复制代码

function fetchUserDate(){
复制代码

当你把状态更新方法放在setTimeout()回调里面时，也会发生同样的事情。

function handleClick() {
复制代码

React 18通过改进批处理机制解决了上面的问题。

现在，当一个以上的状态更新方法从承诺、setTimeout、本地事件处理程序或任何其他以前不被React分批处理的事件中被调用时，分批会被触发。

这个功能的讨论页面可以在这里找到。

对的SSR支持

组件是React库的一个功能，它允许你通过添加一个回退组件来等待一些代码的加载，以便在代码加载之前进行渲染。

下面是一个的实际例子。

<Suspense fallback={<LoadingSpinner />}>
复制代码

你可以从React文档中深入阅读的内容。

在React 18中，即使你在服务器上使用SSR渲染你的组件，也支持功能。这个更新允许你在组件内包裹服务器渲染的组件。

任何包裹在里面的服务器端组件都会先使用回退组件作为HTML流，一旦组件准备好了，React会发送新的HTML位来替代回退组件。

例如，假设你有一个

和一个组件，如下所示。

<Layout>
复制代码

当从服务器渲染时，

组件将被优先处理，组件将被后备组件取代。一旦组件在服务器上渲染完毕，React将把它发送到浏览器，替换掉组件。

关于SSR和Suspense的深入解释，你可以访问以下GitHub讨论页。

用于非紧急状态更新的startTransition API

startTransition API是React 18的一个新功能，旨在帮助你的应用程序在需要大量计算能力来渲染UI的状态更新中保持响应。

这种更新的一个例子是当你创建一个过滤数据列表的输入框时。状态更新需要你的React应用程序计算并只显示与过滤器匹配的数据。

你可能有两个状态更新方法：一个是处理输入值的变化，另一个是处理过滤器的查询。

// Set the input value state
复制代码

当需要过滤的元素数量增加时，过滤元素的计算也会增加。这可能会导致你的应用程序在计算过程中变得迟_缓，甚至冻结_。

为了缓解这个问题，React允许你将某些更新标记为过渡。

过渡更新被当作非紧急更新处理，允许React优先处理紧急更新。

回到这个例子，搜索查询的更新可以通过把它包装在startTransition API中而被延迟，如下所示。

import { startTransition } from 'react';
复制代码

// Urgent: Show what was typed
复制代码

// Mark any state updates inside as transitions
复制代码

当更重要的更新被触发时，包裹在startTransition中的更新将被中断。

在上面的例子中，当用户连续输入多个多个字符时，搜索查询的过渡更新将被停止。这优化了React重新渲染的性能，并消除了陈旧更新的不必要的计算。

你可以在这里找到更多关于startTransition API的信息。

结论

虽然React 18介绍页中提到的几个功能甚至还没有发布（例如useDeferredValue和），但

React 18 Alpha已经为React带来了几个有趣的功能，提高了库的并发能力。你可以通过安装react和react-dom库的@alpha build来尝试。

React服务器组件也还没有更新，但新的并发功能，如SSR对Suspense的支持和来自服务器的流式HTML可能有助于以后实施服务器组件。

React 18的发布时间表如下。

• 阿尔法版本，收集反馈并为React工作组提供支持（今天可用
• 公开测试版供其他人试用（至少在Alpha版本发布后几个月内）。
• 候选发布版（RC）在公共测试版的几周后建立
• 稳定版将在RC版之后几周

感谢你阅读这篇文章。欢迎你自己尝试React 18，但请注意，可能会有突破性的变化，这取决于你的React应用有多复杂。

用Bit开发并跨项目合作开发React组件

无论是React UI组件、React钩子、（即将推出的）React服务器组件，还是简单的JavaScript/Node.JS模块，都可以用 比特来_独立_开发、版本和协作。

使用它来构建模块化的应用程序和设计系统，编写和交付微型前端，或者只是在应用程序之间共享组件。

左图：一个独立的React组件在Bit的工作空间UI中呈现。右图。在其远程范围内查看该共享React组件的依赖图。

Bit: 模块化网络的平台

了解更多

• 构建React组件库–正确的方法
• 独立组件。网络的新构件

---

试用React 18 Alpha版》最初发表在Medium上的《Bits and Pieces》，人们在这里通过强调和回应这个故事来继续对话。