【.com快译】业界期待已久的React18版本终于要发布了。据该团队称，他们的React18alpha版本及其相关计划“正在进行中”。根据2019年前端框架调查显示，ReactJS继续被誉为最受欢迎的框架之一。因此，开发者社区对该框架的期望也在逐年攀升。然而，鉴于React17的最终版本在开发者社区中并不是很受欢迎。因此，本次React团队尝试加入各种新的特性和功能，旨在通过上线计划及时获得用户的反馈。从React18的准备过程中我们可以知道，他们召集了一批技术专家、代码库贡献者、培训师和开发人员。从我在他们的GitHub讨论组中收集到的信息来看，他们一直在计划和开发React18以大放异彩。React18的新特性主要涉及：一些重要的开箱即用的性能改进新的并发特性服务端渲染方面的基础性改进在本文中，我将基于我自己来解释、探索和研究React18为您介绍React18的四大新特性。1.并发并发是同时执行多个任务的能力。在React18中，它作为一个主要的新特性出现。接下来，我们来考虑一个标准的React应用场景。假设有一个带有动画显示效果的组件界面。用户可以在界面上键入或点击相应的React组件。它的动态效果是：当用户输入文字并点击某个按钮时，会在React的上下文中呈现相应的动画效果。在这个过程中，React必须处理所有的函数调用、钩子调用和事件回调，以确保它们可以同时发生。如果React一直花时间渲染动画帧而不是对用户输入做出反应，那么他们认为应用程序卡住了。因为React在单线程进程中工作，它必须合并、重新排序和确定某些事件和功能的优先级，以便为用户提供最佳、高质量的体验。在这方面，React内部使用了一个“调度器”，负责对此类回调和请求进行优先级排序。可以说，在React18之前，用户无法控制这些函数的调用顺序。但是React18可以通过TransitionAPI（下面详细讨论）为用户提供对此类事件循环的各种控制。2.自动批处理（AutomaticBatching）从概念上讲，为了提高性能，将多个状态更新放入一个渲染中的一组React操作称为批处理。通常，当同一个点击事件中有两个或多个状态更新时，React会将它们作为一次性重新渲染进行批处理。例如，当下面的代码片段运行时，当你点击时，即使你在后台设置了两种状态，React也只会执行一次代码渲染：JavaScriptfunctionApp(){const[count,setCount]=useState(0);const[flag,setFlag]=useState(false);functionhandleClick(){setCount(c=>c+1);//不渲染setFlag(f=>!f);//不渲染//React只会在最后重新渲染（那是批处理！）}return(
Next{count}
);}由于合理避免了那些不重要的重新渲染，所以这种机制对于性能维护是非常有利的。同时也可以防止组件出现只更新单个状态但仍处于半完成状态的渲染错误。你可以想象一个场景：当你只选了第一道菜时，餐厅的服务员不会去后厨点菜，而是等到你选完所有的菜。但是，React的批量更新时间是不固定的。原因是以前React只是在浏览器产生事件（如：用户点击）时才进行批量更新，而这里我们是在事件处理完后（如：在fetch的回调中）更新它的状态。请参考以下代码段：JavaScriptfunctionApp(){const[count,setCount]=useState(0);const[flag,setFlag]=useState(false);functionhandleClick(){setCount(c=>c+1);//Doesnotre-renderyetsetFlag(f=>!f);//Doesnotre-renderyet//Reactwillonlyre-renderonceattheend(that'sbatching!)}return(
Next{count}
);}React18引入自动批处理后，无论它的状态来自哪里，都会被一次执行积极地重新渲染。当然，如果不想做批处理，可以使用Flash同步重新渲染目标组件，如下代码片段所示。3、让SSR支持Suspense在一个典型的ReactSSR（ServerSideRendering，服务器端渲染）应用中，为了让服务器直接返回HTML文本给浏览器，应用通常有以下后台步骤：UI上显示的相关数据。服务器将整个应用程序呈现为HTML，并将其作为响应传输到客户端。客户端下载JavaScript包（不是HTML）。最后，客户端将JavaScript逻辑连接到HTML，也就是我们常说的“水合”。当然，典型的SSR应用存在一个问题，就是整个应用的每一步都必须在较短的时间内快速完成，才能开始下一步。今天的React18可以通过Suspense组件对此类问题进行合理的改进。它将应用程序分解为更小的独立单元，这些单元通过上述步骤更快地与用户交互并向用户展示应用程序的内容。4.Transition作为React18的一个新特性，TransitionAPI可以帮助用户解决数据量大的页面频繁更新的问题。比如需要过滤掉输入区域的数据列表，就必须求解区域对应状态的值来分离数据，然后控制输入字段的值。为此，您可以使用“setSearchQuery(input);”更新输入值，并搜索结果。因此，每当用户键入任何字符时，我们都需要更新输入值并使用新值查找列表以最终显示结果。当所有内容都在数据密集型页面上呈现时，这可能会导致页面更新延迟，从而使其他交互或输入变慢甚至无响应。此外，即使您的列表不是太长，每次用户在列表项上击键时，幕后的交互也会变得非常复杂。因此，我们需要找到直接的方法来优化渲染。从概念上讲，我们通常会遇到两种类型的更新。第一类是紧急更新，您必须更改输入字段的值以及与之关联的UI。我们可以使用“setInputValue(input);”显示输入的内容。第二类是不太紧急的更新——显示搜索结果。我们可以使用“setSearchQuery(input);”显示内容。如下代码片段所示，React18带来的新TransitionAPI可以标记更新：JavaScriptimport{startTransition}from'react';//Urgent:ShowwhatwastypedsetInputValue(input);//MarkanystateupdatesinsideastransitionsstartTransition(()=>{//Transition:ShowtheresultssetSearchQuery(输入);});总结上文提到，由于React17不能满足开发者社区的需求，大家希望React18的升级版本能够带来更多的新特性。不过，我们上面讨论的功能只是其测试版功能的一瞥??，也许最终版本发布时还会进行微调。当然，从目前来看，并发等新特性足以辅助开发者，提升应用的速度和效率。因此，总的来说，React18还是值得期待的。原标题：React18:ThingsYouNeedToKnowAboutReactJSLatestVersion，作者：GerrardCooper
