【51CTO.com快译】业界期待已久的React 18版本终于要发布了。据其团队透露，他们的React 18 alpha版本及其相关计划，已经被“安排在路上了”。而根据2019年的一项前端框架调查，React JS已持续被誉为最受欢迎的框架之一。因此，开发人员社区对该框架的期望也在逐年攀升。不过，鉴于React 17的最终版在开发人员社区中，并不太受欢迎。因此，这次React团队尝试添加了各种新的特性与功能，并旨在通过首发计划，来获取用户的及时反馈。
从React 18的准备过程我们可以了解到，他们召集了一个由技术专家、代码库贡献者、培训师、以及开发人员所组成的小组。我从他们在GitHub的讨论组处收集到的信息可知，他们通过周密的计划与开发，希望React 18能够大放异彩。
React 18的新特性主要涉及到：
- 针对一些重要的开箱即用性能的改进
- 新的并发功能
- 服务器端渲染区域的基础性改进
在本文中，我将基于自己对于React 18的解释探索和研究，向您介绍React 18的四个主要新特性。
1. 并发性(Concurrency)
并发性是一种能够同时执行多项任务的能力。在React 18中，它是作为主要新特性出现的。下面，让我们来考虑一个标准的React应用场景。假设有一个带有动画显示效果的组件界面。用户可以输入或单击界面上对应的React组件。
其动态效果为：当用户输入文字和点击按钮时，其对应的动画效果会在React的上下文处予以呈现。在此过程中，React必须处理所有的函数调用、钩子调用、以及事件回调，以保证它们可以同时发生。如果React一直把时间花费在渲染动画帧上，而无法对用户的输入做出反应，那么他们就会认为应用程序卡住了。
由于React工作在单线程的进程中，因此它必须合并，重新排序，以及优先处理某些事件和函数，以便为用户提供最佳、且高质量的使用体验。对此，React在内部使用到了一个“调度程序”，专门负责对此类回调和请求进行优先级的排序。
可以说，在React 18之前，用户并不能控制这些函数的调用顺序。但是React 18则可以通过Transition API(下文将做详细讨论)，向用户提供对于这类事件循环的各种控制。
2. 自动批处理(Automatic Batching)
从概念上说，为了提高性能，一组React将多个状态更新放入一次渲染中的操作，被称为批处理。通常，当同一个点击事件中带有两个、或两个以上的状态更新时，那么React会将它们作为一次性的重新渲染(re-render)进行批处理。例如，在如下代码段正在运行时，当您进行一次单击时，尽管您在后台设置为两个状态，但是React也只会执行一次性的代码渲染：
JavaScript
function App() {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);
function handleClick() {
setCount(c => c + 1); // Does not re-render yet
setFlag(f => !f); // Does not re-render yet
// React will only re-render once at the end (that's batching!)
}
return (
<div>
<button onClick={handleClick}>Next</button>
<h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
</div>
);
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
由于合理地避开了那些不重要的重新渲染，因此该机制对于性能的维持是十分有利的。同时，它还可以防止组件去渲染那些仅更新了单个状态、却还处于半完成状态的变量，所产生的错误。您可以假想一个场景：在您只选择了第一道菜时，餐厅的服务员是不会跑到后厨下单的，而是会等到您完成了所有菜品的选择后再去。
不过，React的批量更新时间并不固定。其原因在于：过去，React只在浏览器产生事件(如：用户的点击)时，执行批量更新，而此处我们是在事件已经处理之后，才去更新其状态(如：在fetch的回调中)。请参见如下代码段：
JavaScript
function App() {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);
function handleClick() {
setCount(c => c + 1); // Does not re-render yet
setFlag(f => !f); // Does not re-render yet
// React will only re-render once at the end (that's batching!)
}
return (
<div>
<button onClick={handleClick}>Next</button>
<h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
</div>
);
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
在React 18引入了自动批处理的方式之后，无论其状态来自何处，它都会一次性地执行重新渲染。当然，如果您并不想采取批量处理的方式，则可以按照如下代码段所示，使用Flash同步，来重新渲染目标组件。
3. 让SSR支持Suspense
在典型的React SSR(服务器端渲染，Server Side Rendering)应用程序中，为了让服务端直接返回HTML文本给浏览器，应用程序通常会发生如下的后台步骤：
- 服务器检索那些必须显示在UI上的相关数据。
- 服务器将整个应用程序渲染为HTML，并将其作为响应传输到客户端。
- 客户端下载JavaScript包(不包括HTML)。
- 最后，客户端将JavaScript逻辑连接到HTML上，也就是我们常说的“水合(hydration)”。
当然，典型的SSR应用程序存在着一个问题，即：整个应用程序的每一步，都必须在较短的时间内迅速完成之后，才能开始下一步。 如今的React 18通过Suspense组件，能够对此类问题进行合理的改进。它会将应用程序分解成为遍历上述步骤的更小的独立单元，以便更快地进行交互，并向用户呈现应用的内容。
4. 转换(Transition)
作为React 18的一项新功能，Transition API能够协助用户解决，在大数据量页面上出现的频繁更新的问题。例如，如果需要在已输入的区域内过滤出数据列表，那么您就必须在对应的状态中，求解该区域的值，以分离出数据，进而控制输入进来的字段值。为此，您可以使用“setSearchQuery(input);”来更新输入值，并搜索结果。
因此，每当有用户键入任何字符时，我们都需要更新输入值，并使用新的值来查找列表，以最终显示结果。而当所有的内容都被渲染到大数据量的页面上时，这可能会导致页面更新的延迟，从而使其他交互或输入变得缓慢、甚至无响应。此外，即使您的列表并不太长，用户在每次击键列表项时，后台的交互也可能变得非常复杂。因此，我们需要找到能够优化渲染的直接方法。
从概念上说，我们通常会碰到两种类型的更新。第一类是紧急更新，您必须更改输入字段的值，以及与之相关的UI。我们可以使用“setInputValue(input); ”来显示输入的内容。而第二类是不那么紧急的更新--显示搜索结果。我们可以使用“setSearchQuery(input); ”来显示内容。
如下代码段所示，由React 18带来的新的Transition API，可以对更新予以标记：
JavaScript
import { startTransition } from 'react';
// Urgent: Show what was typed
setInputValue(input);
// Mark any state updates inside as transitions
startTransition(() => {
// Transition: Show the results
setSearchQuery(input);
});
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
小结
如前所述，由于React 17并不能满足开发者社区的各项需求，因此大家希望作为升级版的React 18能够带来更多新的功能。不过，我们在上面讨论的功能，只是从其测试版中窥见的特性，也许在发布之时，其最终版本仍会有所微调。当然，从目前来看，诸如并发性等新的功能，足以协助开发人员，提高应用程序的速度和效率。因此，总的说来React 18是值得我们期待的。
原文标题：React 18: Things You Need To Know About React JS Latest Version，作者：Gerrard Cooper
【51CTO译稿，合作站点转载请注明原文译者和出处为51CTO.com】