React（一）：React的特征及优势

React 最早起源于Facebook，但后来因为其独特的设计思路，出众的性能以及简单的代码逻辑，深受前端开发者的喜爱，目前已成为WEB前端主流的开发工具。其具有的特征与优势如下：

1、JSX

JSX（JavaScript XML）是js内定义的一套XML语法，最终被解析成js。在JSX中可以将HTML于JS混写。如：

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）浏览器渲染机制

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

• DOM树：浏览器将HTML解析成DOM树；
• CSS规则树：浏览器将CSS解析成规则树；
• Render树：将DON和CSS树合并之后形成Render树；
• 布局（layout）：对Render树的各个节点进行布局，计算页面位置，大小等；
• 绘制（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上，从而提高页面渲染速度与性能。

这个地方有一个问题：我们对DOM树做的每一次变化都是更新到虚拟DOM上的，那么什么时候虚拟DOM会和DOM进行比较，更新DOM？这个问题的解答请见文章《React（五）：React在什么情况下会执行render》

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）。

欢迎关注公众号“洁儿的漫漫求学路”，互相学习，共同进步~