React 18 最新进展：发布 Beta 版本，公开测试新特性

根据 前端框架调查 ，Reactjs 是开发者社区中最受欢迎和喜爱的框架。此外，根据 2020 年堆栈溢出调查 ，React 是开发人员之间使用最多的前端开发框架。只有 jQuery 库领先于 Reactjs。

现在，是时候通过更详细的描述来查看 React 18 的主要功能了。在此之前，我们看到了最新更新的主要要点。

React 18 的主要产品

• 性能改进
• 更新了并发功能
• 服务器端渲染的重要改进

并发

并发将同时执行多个任务。在标准的 React 应用程序中，如果动画在一个组件中工作，同时用户点击或输入其他 React 组件，如果用户键入或单击按钮，动画也会在 React 的上下文中呈现。

此外，React 可以处理所有钩子调用、函数调用和事件回调。其中一些也同时发生。在React 18之前，用户无法控制函数的调用顺序。但是，在 React 18 到来之后，它通过转换 API 向用户提供了对事件循环的控制。

批更新处理

自动更新批处理意味着在单个渲染中反应多个状态更新以提高性能的组称为批处理。React 提供了最佳性能，因为它避免了不重要的重新渲染。它还阻止组件呈现半完成状态，同时在创建错误时更新单个状态变量。例如，在餐厅，服务员在选择第一道菜后不会跑到他的厨房，而是等待完成订单。

React 18在更新后启动的自动批处理中，它会重新渲染一次，而不管其状态来源。

服务器段渲染SSR

服务器端渲染逻辑是扩展。在 React 的 SSR 应用中，有一些步骤是连续发生的。

• 服务器会检索那些显示在 UI 上的相关数据。
• 服务器将整个应用程序呈现为 HTML 并迅速响应客户端响应。
• 客户端会运行不包括 HTML 的 javascript 包。

在最后一步，客户端与 javascript 逻辑连接，因为它被称为 hydration。

典型的 SSR 应用程序存在一个问题，即每个步骤都必须完成才能进入下一步。

React 18 提供了带有 <suspense> 组件的解决方案，这些组件彻底改变了从上述步骤中产生的小型独立单元的故障。因此，用户可以快速查看应用程序内容并开始与之交互。

React 18 工作组 宣布 React 18 从 Alpha 进入 Beta 阶段，Beta 是测试版本， 大部分工作都是对 Alpha 版本发布的新特性进行文档优化、功能测试和改进，在最终版本发布之前 不会有任何额外的新特性或 API 。

关于 React 18 Alpha 版本已发布 的新特性可以查看此新闻： React 18 最新进展：发布 alpha 版本、全新 SSR 架构 。

Beta 版预计测试 1-2 个月，届时将推出 React 18 RC（候选）版本。 目前 React 18 正在 与 Redux、Next.js 和 React 测试库等关联库密切合作，以提供顺畅的升级路径，已知兼容 React 18 的库如下：

Next.js

Next.js 的最新版本支持 React 18 和并发特性： https ://nextjs.org/docs/advanced-features/react-18

Gatsby

Gatsby 从 v3.7 开始支持 React 18 和并发特性。 https://www.gatsbyjs.com/blog/how-to-try-react-18-in-gatsby/

React Redux

React Redux v8 将支持 React 18。在内部使用新的 useSyncExternalStore API 来确保与 React 18 并发特性的兼容性。

React Testing Library

React 测试库 v13 支持 React 18，会自动将测试切换到 createRoot ，不需要作过多升级