经常看到有些文章提到有了React是不是应该抛弃jQuery，每次看到类似这样的议题或评论，我首先想到的是这群同学并没有真正理解jQuery与React的区别。更有甚者说jQuery的包太大了，不要引用。在这里，我来简单地比较一下它们的用武之地，代码是你自己在写，你可用可不用。

概念

jQuery官网的描述

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

翻译一下：jQuery是一个快速、小巧、功能丰富的JavaScript库。它使HTML文档遍历和操作、事件处理、动画和Ajax等操作变得更加简单，因为它提供了一个易于使用的API，可以跨多种浏览器工作。jQuery结合了通用性和可扩展性，改变了数百万人编写JavaScript的方式。

React官网的描述

A JavaScript library for building user interfaces.

翻译一下：一个用于构建用户界面的JavaScript库。

两者区别

• jQuery它只是一个工具库，一个集成了DOM操作+很多公共方法的工具库

• React是一个UI渲染库，它像一个模板生成器，通过一堆数据来生成HTML

经过简单比较，我们可以得出这样的结论：

它们俩在功能描述上并没有相同之处，均未侵犯各自的领地，也就是说我们在使用React的同时，也可以使用jQuery，反之也可。

具体功能

jQuery

全部的功能点：

我们可以清晰地看到jQuery主要有如下的功能：

• 选择器：用来简化对元素的查找

• Ajax：用来发起异步请求

• DOM处理：用来增删改DOM

• 事件：用来给元素绑定事件

• 动画：用来给元素增加动画效果

• 工具库：数组的遍历、Promise等

这些功能都可以使用原生的JS来实现，jQuery对这些常用的操作都进行了封装，并且我们不需要考虑过多的浏览器兼容问题。

React

找了一张React生命周期图，可能有点过时，但不妨碍我们对它的理解。

React主要负责的是UI界面（view层）的渲染，它就是一个class，你需要new一个它，然后给它传一些参数，之后它就给你输出一个html字符串，这个html字符串，就是你界面上需要展示的html，这里说的比较简单，只是便于理解。那么，React主要做了什么事情呢？

• 构建虚拟DOM模型（用JS对象模拟一个DOM的结构，当操作完这个JS对象后，再把此对象还原成真实的DOM）

• 完整的生命周期（可以在不同时间段更新状态或进行其它操作）

• Diff比较（可以尽量减少不相关的DOM更新，提高性能）

两者区别

• 功能上确实没有重叠

• 两者解决的问题均不一样，jQuery解放了原生JS的繁琐，而React更是不再需要MVVM、mustache那一套了。

总结

jQuery并没有过时，而且会活得很好，只是你自己的React项目中用得少。如果你的项目中没有使用React，估计你一定会使用jQuery。如果你的项目中正在使用React，那么在下面这几种情况下引用一下jQuery也是可以的：

• 功能单一，没有复杂的UI渲染和状态切换，但需要写一些DOM操作相关的代码

• 要使用JS去操作一个并非React渲染出来的DIV