2.1 为什么使用 React
React是一个用于构建用户界面的JavaScript库，具有组件化、声明式等优点，另外由于其优秀的DOM性能优化，使其一面世就广受用户追捧。
本章从专注于视图层、组件化开发和声明式编程、Virtual DOM几个特征来说明为什么使用React。
注：单纯的React.js只是一个JS库，而其整个技术栈就是一个渐进式的框架。渐进式框架：主张最少，也就是可以只用它其中的一部分，比如，开始搭建项目时，开发者只需要用到React，就可以只引入React，当项目有了新的需求之后，可以再引入其他的类库，如路由库、状态管理库等。
2.1.1 专注于视图层
在编写前端项目的时候，经常会涉及对DOM的操作。开始时用户都是使用原生JS直接去操作DOM节点，但是原生API实在不好用并且还有很多兼容方面的问题，所以jQuery就横空出世了。
很长一段时间内，JQuery以其简洁的API俘获着前端开发者的心。但JQuery只是简化了DOM操作，在性能优化上并没有做什么处理。随着前端的业务越来越复杂，想要写出如微博这些交互比较复杂的页面，JQuery就远远不够了，React正是在这种背景下诞生的。
React专注于View层的解决方案，Facebook官方也说React就是一个View层，也就是视图层。什么意思呢？就是在使用React的时候，只要告诉React需要的视图长什么样，或者告诉React在什么时间点，把视图更新成什么样就可以了，剩下的视图的渲染、性能的优化等一系列问题交给React搞定即可。
2.1.2 组件化开发和声明式编程
在React中，通常会把视图抽象成一个个组件，如Button按钮组件、Menu菜单组件、List列表组件等，然后通过组件的自由结合来拼成完整的视图。这种操作可以极大提升开发效率，后期维护和相关的测试也都十分便捷。
在传统的项目开发中，通常采取命令式的编程方式。下面通过留言板这个案例来看看之前的编写方式，这个案例中先暂时不考虑输入框，只看留言添加部分，具体代码如下：
Html：
JavaScript：
在实现的过程中，可以看到操作过程是一步一步地给程序下命令：
1）获取新留言。
2）创建一个新的li标签。
3）把留言内容放入li。
4）把生成的li放入list。
这种一步一步下命令的方式就称为命令式编程，这个过程还是比较烦琐的，尤其程序逻辑比较复杂时需要编写大量的代码。
而React遵从的是声明式编程，声明式和命令式有什么区别？简单的总结：命令式编程注重过程，开发者需要告诉程序每步要怎么做；声明式编程注重结果，直接告诉程序要什么。同样以留言板为例，来看看利用React怎么来实现，具体代码如下：
Message就是一个最基础的React组件。该组件中，先在useState中定义了数据模型（[{id:1，……}，……]），然后在return后定义了要输出的视图（＜div＞……＜/div＞），同时在视图中定义好了数据模型和视图的关系。单击按钮时只是修改了数据，React会帮助开发者进行视图的修改。
在这个过程中并没有一步一步命令React要怎么做，只是告诉React数据模型长什么样式，视图长什么样式，数据和视图之前的关系是怎样的，最终就完成了整个程序。这种编程方式就是声明式编程。
从这里看到，声明式编程逻辑更加清晰，代码更加容易阅读，当然后期维护也会更加容易。
2.1.3 Virtual DOM
在留言板的案例中，可以看到React采取声明式编程使逻辑更加清晰易懂，除此之外也可以看到一部分React的工作方式：建立state，根据state生成视图，修改state，生成新的state，根据新state生成视图。
如图2-1所示，在这个过程中，只要对state进行修改，React就会重新渲染视图。那大量的DOM操作会对页面性能造成影响吗？这就涉及React中的一项核心技术——虚拟DOM（Virtual DOM）。
●图2-1 React工作方式
在React中，每一个组件都会生成一个虚拟DOM树。这个DOM树会以纯对象的方式来对视图（真实DOM）进行描述，如图2-2所示，可以看到虚拟DOM树是如何来描述DOM结构的。
React会根据组件生成的虚拟DOM来生成真实的DOM。组件中的数据变化后，组件又会生成一个新的虚拟DOM，React会对新旧虚拟DOM进行对比，找出发生变化的节点，然后只针对发生变化的节点进行重新渲染，这样就极大提升了重新渲染的性能。
●图2-2 虚拟DOM
本节讲述了React的一些基本特性：专注于视图层、组件化开发、声明式编程以及基于虚拟DOM的视图更新。这些特性可以给开发带来极大的便利，另外也使代码性能有了大幅度的提升，这也是React会受到用户追捧的核心原因。