如今的用户期待web应用表现得越来越像原生应用。大量的技术用于减少用户首次访问时等待时间。然而,在许多交互复杂的web应用中,用户操作与响应之间的时间间隔也很重要。原生应用在这方便做的非常好,用户期待web应用应该与原生体验接近,即使在网络不理想的情况下。

许多现代JavaScript框架的出现,有效地解决了上述问题。其中,React是最流行、最健壮的JavaScript库之一,可以用来创建快速、交互式的用户界面。

在本文中,我将分析React擅长什么以及它的工作原理,这可能对你将来做技术选型时提供一些依据。

React是什么?

React是一个由Facebook创建的,一个用于构建用户界面的JavaScript库。

它是一个开源项目,到目前为止,已经在GitHub上获得了超过74,000颗星星。

React的优势(官方说法):

  • Declarative(声明式): 您只需要为应用程序中的每个状态设计简单的视图,并且在数据更改时,React将有效地更新和呈现正确的组件。
  • Component-based(组件化: 通过组装许多封装的组件来创建基于响应的应用程序,每个组件管理自己的状态。
  • Learn Once, Write Anywhere: React不是一个成熟的框架;它只是一个用于呈现视图的库。

Virtual DOM如何工作?

如果您希望更新web页面的任何部分,都需要修改DOM。根据DOM的复杂性和大小,遍历和更新DOM的时间可能比用户能够接受的时间要长,特别是考虑到DOM中发生更改时浏览器需要做的工作。实际上,每次DOM更新时,浏览器都需要重新计算CSS,并在web页面上执行布局和重绘操作。

React允许开发人员更改web页面,而无需直接通过DOM,而是通过Virtual  DOM完成。

Virtual  DOM是React能够快速渲染页面的关键

Virtual  DOM是DOM的轻量级抽象模型。React使用render方法从React组件创建节点树,并更新该树,以响应操作导致的数据模型更改。

每次在React应用中对底层数据进行更改时,React都会为用户界面创建一个新的Virtual  DOM。

UI更新

当涉及到更新浏览器的DOM时,React大致有以下步骤:

1、每当发生更改时,React都会以Virtual  DOM表示重新呈现整个UI。

2、然后,React计算以前的Virtual  DOM表示与新的表示之间的差异。

3、最后,用实际更改的内容对真实DOM进行修补。如果没有任何更改,React将完全不处理HTML DOM。

可能有人会认为在内存中保存两个Virtua DOM并对它们进行比较可能比直接处理真实DOM要慢。这就是高效的diff算法、通过批处理DOM读/写操作,并将DOM更改限制到最小化的更新,这使得使用React及其Virtua DOM成为构建高性能应用程序的最佳选择。

什么样的项目适合React?

顾名思义,React非常擅长创建快速反应的用户界面——也就是说,ui非常快速地响应事件和随之发生的数据更改。

虽然有些人会说所有项目都需要React,但我认为说React非常适合web应用,因为在web应用中,需要保持复杂的UI交互与数据模型的频繁更改同步,这是没有争议的。

  • 大量的状态管理和DOM操作。比如,启用和禁用按钮、激活链接、更改输入值、关闭和展开菜单等等。在这类项目中,React使管理有状态组件变得更快、更容易
React负责解决最困难的部分,即找出DOM实际需要发生哪些更改。
  • 通过直接修改DOM来跟踪复杂状态可能会导致代码混乱,至少在不特别注意代码组织和结构的情况下是这样。

最后

React和其他类似的JS库简化了快速响应状态变化的事件驱动用户界面的开发。弥补了web应用和原生应用间的差距.

用户感觉web应用像原生应用一样平滑和无缝转换。

这就是现代web发展的方向。最新的Create React App (该项目可以创建零配置的React应用程序)附带了默认情况下创建渐进式web应用(PWAs)的功能。这些应用程序利用service worker和离线优先缓存来降低网络延迟,并使web应用具备离线运行的能力。