2.4　与传统jQuery对比

jQuery是由约翰·雷西格（John Resig）在2006年1月份发布的一套跨浏览器JavaScript库，极大地简化了HTML与JavaScript之间的操作。当时深受前端开发人员的欢迎，jQuery在操作DOM、处理事件等方面带来了福音，使得开发效率得到空前提升。

随着时间慢慢推移，人们在开发一些比较复杂的大型项目时，传统的jQuery变得越来越难用：一方面是性能问题，由于jQuery经常性地操作DOM元素，会消耗大量的运行时间；另一方面，用jQuery去编写复杂的DOM操作，代码会有大量堆积现象，很难维护。当然，jQuery流行多年，自然有其独特的优点，和当下流行的React相比，各有秋色，只是分项目类型而已。

现在要实现一个数值增加功能，思路大概为：在HTML中定义两个元素，一个为段落标签，用来显示数值大小；另一个为按钮，用来触发数值增加事件。jQuery的写法如示例2-4所示。

【示例2-4　jQuery实现数值增加功能】

该示例中用到的两个标签在＜body＞＜／body＞中定义，jQuery首先利用选择器来获取需要用到的两个DOM元素，然后进行逻辑运算之后，再赋值给DOM元素。jQuery更多关注的是实现逻辑过程，然后操作DOM改变其状态。

下面用React实现同样的功能，如示例2-5所示。

【示例2-5　React实现数值增加功能】

React的实现比较整体，定义一个类AddNumber，其内部既实现了逻辑操作，也渲染了DOM元素，并且其状态值用state来跟踪。当state发生变化时，render（）方法才会把最后的结果进行DOM渲染。

React相对jQuery有如下几点优势：

·React的组件化要比jQuery的随时操作DOM方式更整体，对于开发者来说，React的这种方式写起来更加舒服，代码写起来会更优雅。

·React的关注点更多在组件的state上，而不用担心组件有没有更新，因为React如果认为state发生变化，会自动调用render（）方法进行DOM渲染。但是jQuery需要开发者自己完成这些事情。

·React中采用了虚拟DOM技术，如果state中间发生了很多次变化，但是第一次和最后一次的状态是相同的，那React会认为该组件状态未更改，不会进行真正的DOM渲染，但是jQuery不一样，jQuery需要对每一次的状态变化进行DOM操作，这样会浪费页面的很多运行时间，性能相对React来说差得多。

·如果是一个复杂项目，采用React的组件化思想，耦合度较低，多人合作开发，各个模块相对独立，后期好维护；用jQuery写一些大型复杂的项目，如果没有一个好的架构组织，后期的项目维护会变得越来越难。