前端UI的本质问题是如何将来源于服务器端的动态数据和用户的交互行为高效地反映到复杂的用户界面上,React另辟蹊径,通过引入虚拟DOM、状态、单向数据流等设计理念,形成以组件为核心,用组件搭建UI的开发模式,理顺了UI的开发过程,完美的将数据、组件状态和UI映射到一起,极大的提高了开发大型Web应用的效率

React具有以下特征与优势:

1、JAX引擎

JSX(JavaScript XML)是javascript内定义的一套XML语法,最终被解析成javascript, 在JSX中可以将HTML与JavaScript混写


ReactDOM.render(
    <div>
        <h1>{1+1}</h1>  // JavaScript表达式用{}表示
    </div>,
    document.getElementById('example')
);

2、虚拟DOM,高效速度快,跨浏览器兼容

React之所以速度快,是因为其独特的特征 - 虚拟DOM(Document Object Model)

虚拟DOM顾名思义不是真实的DOM,它不需要浏览器的DOM API支持,虚拟DOM是在DOM的基础上建立一个抽象层,其实质是一个JavaScript对象,当数据和状态发生了变化,都会自动高效的同步到虚拟DOM中,最后再将进变化的部分同步到DOM中。

它为什么直接操作DOM很慢,而虚拟DOM很快,这需要线了解浏览器的渲染机制

1、浏览器渲染机制

浏览器渲染一个页面的主要流程

  1. DOM树: 浏览器将HTML解析成DOM树;
  2. CSS规则树: 浏览器将CSS解析成规则树
  3. Render树: 将DOM和CSS树合并之后形成Render树;
  4. 布局(Layout): 对Render树的各个节点进行布局,计算页面位置、大小等;
  5. 绘制(paint): 根据结算出的规则,通过显卡,将内容绘制在屏幕上。

其中布局和绘制两个过程是非常耗时的。

2、浏览器的reflow和repaint

reflow(回流):当浏览器某个位置的布局发生了变化,浏览器会重新从根部开始计算该节点的布局。比如向页面中添加、删除某一元素,折叠面板等,只要这些操作影响了页面上元素的位置或大小的变化,都将引起回流。

repaint(重绘): 只改变页面元素的颜色、字体等不影响布局的属性时,浏览器会进行重绘操作。

由上可见,相比repaint操作,reflow的耗时要更多。只要是动态的对页面进行修改,浏览器的reflow和repaint操作就是不可避免的,我们要做的就是静可能的减少浏览器的reflow和repaint的次数。

(3)直接操作DOM为什么很慢

直接对DOM对象进行操作,例如:在现有DOM树中新增节点,删除节点,或改变当前节点的位置和大小等,将引起浏览器的reflow操作;改变背景颜色,改变字体大小,将引起浏览器的repaint操作。这些操作都会增加耗时,降低浏览器渲染的性能。

(4)虚拟DOM为什么很快

react的虚拟DOM,是一个存储于内存中的JavaScript对象,react先将页面发生的变化更新到虚拟DOM,每一次的变化都和上一次虚拟DOM的状态进行比较,找到变化的部分,最终raect会将包含了所有变化的虚拟DOM与真实DOM进行比较,找到DOM发生变化的部分,一次性应用到DOM上,从而提高页面渲染速度与性能。

3、组件

组件是react的核心,一个完整的react应用是由若干个组件搭建起来的,每个组件有自己的数据和方法,组件具体如何划分,需要根据不同的项目来确定。

组件的特征是可复用,可维护性高。

4、灵活

React只是MVC中的View层,自己无法构建大型的应用,需要与已有的框架和库来配合,如:、Flux(前端架构) 、Redux(状态管理)、Axios/Fetch(异步请求)等。

5、React Native

React Native 是使用JavaScript和React编写的原生移动应用,在设计原理上与React一致,通过声明式的组件机制来搭建丰富多彩的用户界面。React Native并不是“网页应用”或者说是“HTML5应用”又或者“是混合应用”,而是一个真正的移动应用。在使用感受上与C和JAVA编写的应用几乎是无法区分。React Native兼容了原生代码,应用的一部分用原生,一部分用React Native也是没问题的(如Facebook)。




Powered by 望曦开源博客