React 18 中的新功能 - enlear


根据前端框架调查,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> 组件的解决方案,这些组件彻底改变了从上述步骤中产生的小型独立单元的故障。因此,用户可以快速查看应用程序内容并开始与之交互。