文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

您需要知道的有关React 18的新特点

2024-12-14 01:13

关注

【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

  1. function App() { 
  2.   const [count, setCount] = useState(0); 
  3.   const [flag, setFlag] = useState(false); 
  4.   
  5.   function handleClick() { 
  6.     setCount(c => c + 1); // Does not re-render yet 
  7.     setFlag(f => !f); // Does not re-render yet 
  8.     // React will only re-render once at the end (that's batching!) 
  9.   } 
  10.   
  11.   return ( 
  12.     
     
  13.       Next 
  14.        
  15.     
 
  •   ); 
  • 由于合理地避开了那些不重要的重新渲染,因此该机制对于性能的维持是十分有利的。同时,它还可以防止组件去渲染那些仅更新了单个状态、却还处于半完成状态的变量,所产生的错误。您可以假想一个场景:在您只选择了第一道菜时,餐厅的服务员是不会跑到后厨下单的,而是会等到您完成了所有菜品的选择后再去。

    不过,React的批量更新时间并不固定。其原因在于:过去,React只在浏览器产生事件(如:用户的点击)时,执行批量更新,而此处我们是在事件已经处理之后,才去更新其状态(如:在fetch的回调中)。请参见如下代码段:

    JavaScript

    1. function App() { 
    2.   const [count, setCount] = useState(0); 
    3.   const [flag, setFlag] = useState(false); 
    4.   
    5.   function handleClick() { 
    6.     setCount(c => c + 1); // Does not re-render yet 
    7.     setFlag(f => !f); // Does not re-render yet 
    8.     // React will only re-render once at the end (that's batching!) 
    9.   } 
    10.   
    11.   return ( 
    12.     
       
    13.       Next 
    14.        
    15.     
     
  •   ); 
  • 在React 18引入了自动批处理的方式之后,无论其状态来自何处,它都会一次性地执行重新渲染。当然,如果您并不想采取批量处理的方式,则可以按照如下代码段所示,使用Flash同步,来重新渲染目标组件。

    3. 让SSR支持Suspense

    在典型的React SSR(服务器端渲染,Server Side Rendering)应用程序中,为了让服务端直接返回HTML文本给浏览器,应用程序通常会发生如下的后台步骤:

    当然,典型的SSR应用程序存在着一个问题,即:整个应用程序的每一步,都必须在较短的时间内迅速完成之后,才能开始下一步。 如今的React 18通过Suspense组件,能够对此类问题进行合理的改进。它会将应用程序分解成为遍历上述步骤的更小的独立单元,以便更快地进行交互,并向用户呈现应用的内容。

    4. 转换(Transition)

    作为React 18的一项新功能,Transition API能够协助用户解决,在大数据量页面上出现的频繁更新的问题。例如,如果需要在已输入的区域内过滤出数据列表,那么您就必须在对应的状态中,求解该区域的值,以分离出数据,进而控制输入进来的字段值。为此,您可以使用“setSearchQuery(input);”来更新输入值,并搜索结果。

    因此,每当有用户键入任何字符时,我们都需要更新输入值,并使用新的值来查找列表,以最终显示结果。而当所有的内容都被渲染到大数据量的页面上时,这可能会导致页面更新的延迟,从而使其他交互或输入变得缓慢、甚至无响应。此外,即使您的列表并不太长,用户在每次击键列表项时,后台的交互也可能变得非常复杂。因此,我们需要找到能够优化渲染的直接方法。

    从概念上说,我们通常会碰到两种类型的更新。第一类是紧急更新,您必须更改输入字段的值,以及与之相关的UI。我们可以使用“setInputValue(input); ”来显示输入的内容。而第二类是不那么紧急的更新--显示搜索结果。我们可以使用“setSearchQuery(input); ”来显示内容。

    如下代码段所示,由React 18带来的新的Transition API,可以对更新予以标记:

    JavaScript

    1. import { startTransition } from 'react'
    2.   
    3. // Urgent: Show what was typed 
    4. setInputValue(input); 
    5.   
    6. // Mark any state updates inside as transitions 
    7. startTransition(() => { 
    8. // Transition: Show the results 
    9. setSearchQuery(input); 
    10. }); 

    小结

    如前所述,由于React 17并不能满足开发者社区的各项需求,因此大家希望作为升级版的React 18能够带来更多新的功能。不过,我们在上面讨论的功能,只是从其测试版中窥见的特性,也许在发布之时,其最终版本仍会有所微调。当然,从目前来看,诸如并发性等新的功能,足以协助开发人员,提高应用程序的速度和效率。因此,总的说来React 18是值得我们期待的。

    原文React 18: Things You Need To Know About React JS Latest Version,作者:Gerrard Cooper

    【51CTO译稿,合作站点转载请注明原文译者和出处为51CTO.com】

     

    来源:51CTO内容投诉

    免责声明:

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

      难度     813人已做
      查看
    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看
    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看
    • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

      难度     435人已做
      查看
    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机
    位置:首页-资讯-后端开发
    咦!没有更多了?去看看其它编程学习网 内容吧
    首页课程
    资料下载
    问答资讯