经常看到有些文章提到有了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