2.1　React带来的变化

React颠覆了以前我们了解的一些JS框架（比如jQuery）的写法和架构，本节就来说说React的特色。

2.1.1　React的声明式编程

声明式编程是告诉机器想要什么信息，机器就返回什么信息，偏重结果。声明式编程可以和命令式编程做一个对比，命令式编程是命令机器要做什么事，机器就做什么事，偏重于过程。为了更好理解这一概念，下面列举两个示例进行对比。

【示例2-1　命令式编程】

上述示例中实现的功能为，将arry数组中的所有值进行乘2操作，运用for循环语句来告诉机器，要用这种方式来实现。这就是命令式编程的方式。接下来看声明式编程是怎么实现的。

【示例2-2　声明式编程】

上述示例的实现，是直接将arry数组的所有值进行乘2操作后直接将结果返回给doubled数组，即告诉机器，要得到一个乘2后的结果数组。这就是声明式编程。

React的声明式编程就是这个原理，把相关的实现都抽离出来，使开发者更多地去关注想要什么。在声明式编程的思想中，更加突出的是整体性的编程思路，这也是React这个框架中的一个核心思想。

2.1.2　React的组件化思想

以前读者在学习HTML标签的时候，其实就已经接触到组件化了，HTML的标签就可以理解为一个组件，比如一个＜button＞＜／button＞，就可以理解成这是一个按钮组件。React的整体设计思路就是实现自定义的组件。组件化的编程有很多优势：一个好的组件可以在项目中多处使用，这样会节省很多重复工作；其次，组件的分离可以让开发者更加专注每个组件内部的实现，这种高内聚的特性还不会影响到其他开发者的代码模块。

【示例2-3　React自定义组件】

在上述示例中，MyButton就是一个自定义组件。组件的定义也可以用ES6提供的class来定义，上述的示例用class来定义也可以写为这样：

2.1.3　React的虚拟DOM

在没有虚拟DOM概念之前，如果要对DOM节点执行修改操作，就会直接操作真实DOM树。众所周知，前端中一些性能低的问题，有很多原因就是真实DOM树操作太过频繁而导致页面性能下降造成的。

React中虚拟DOM概念的出现，在提高页面性能方面起到了很大的作用。比如现在要操作一个A节点，进行三次状态改变：第一步改为1状态，第二步改为2状态，第三步再改回1状态。如果是传统的DOM操作，会进行3次改变，而利用React的虚拟DOM技术，会对A节点的第一次状态和最后一次状态进行对比。在该例中，第一次和最后一次的状态一样，所以React是不会对真实的DOM树进行改变的，这样就大大节省了渲染成本，提高了页面运行效率。

也就是说，虚拟DOM树可以记录节点的变化过程，但最后真实的渲染结果是由diff算法（第5章将讲解）来控制的，React只对有真正变化的节点进行渲染。