【React开发】React 18 有什么新功能?

Chinese, Simplified

介绍



借助批处理、并发、转换 API 等,React 18 看起来很有前景。每次发布新版本,框架都会越来越好。作为最常用的 JavaScript 框架,React 最常用于构建具有大量令人难以置信的功能的现代应用程序。

React 团队宣布了第 18 版的发布计划。成立了一个工作组,让社区为逐步适应新功能做好准备。下一个 React 版本中有许多 API 更改和重要特性。



新功能和变化



1.新的 Root API



为了跟踪树渲染,“根”(root)是指向 React 使用的数据结构级别的指针。此外,在 API 遗留系统中,根对用户来说是不透明的,因为他们将其附加到 DOM 的元素上,并使用 DOM 节点访问它,而不会将其暴露给用户。但是,根不需要存储到 DOM 节点。

运行更新存在一些问题,包括需要将容器连续传递到渲染中,即使它保持不变。新增的根 API 解决了这个问题,因此不再需要将容器传递给渲染。此外,根 API 更改允许删除 hydrate 方法并将其替换为根选项。



2.新的开始过渡API (New Start Transition API)



这使应用程序保持响应。这是最重要的更新之一,它使应用程序在大屏幕更新期间保持响应。此外,该 API 使用户能够控制并发方面以促进用户交互。它是通过将大量更新包装为“开始转换”来完成的,并且只有在启动了更紧急的更新时才会中断。

因此,它实际上对缓慢和紧急的更新进行了分类。如果用户操作中断了转换,React 会丢弃未完成的陈旧渲染工作并仅渲染最新的更新。



3.自动批处理增强(Automatic Batching Enhancement)



批处理无非就是将 React 的多个状态更新分组到一个渲染状态中,以实现更好的计算性能。在早期的 React 版本中,批处理仅针对 React 事件处理程序进行。然而,对于任何其他事件,例如设置超时、promise 内的更新、异步状态更新、设置超时和本机事件处理程序,默认情况下更新不会在 React 中批量处理。

这可以通过使用 Root API 在版本 18 中添加自动批处理来解决。所有更新都将自动批处理,无论其来源如何。



4.架构改进,新悬念SSR



通过 React 18 的服务器端渲染,添加了架构增强功能。此外,服务器端渲染从服务器上的 React 组件生成 HTML 并将其返回给客户端。现在,客户端能够在包加载和运行 JavaScript 之前看到页面的内容。

然而,SSR 有一个缺点。它不允许组件等待数据。这意味着在向客户端呈现 HTML 之前,应该为服务器组件准备好数据。在与它们交互之前,您还需要等待所有组件水合。

这个问题可以通过悬念的两个新功能来解决,例如选择性水合和流式 HTML。



包起来



React 18 包括开箱即用的增强功能和具有影响力的新功能。此外,它为新的 React 应用程序开发可能性扫清了道路。

新版本将带来许多强大的功能来提升开发者体验并帮助创造令人惊叹的网络体验。它开启了新的可能性并提高了性能。

原文:https://javascript.plainenglish.io/whats-new-with-react-18-88a06325bf9e

本文:

SEO Title
What’s New with React 18?