被误解的jQuery,一直过得很好;被溺爱的React,依然是个宝

 一家之言  原创  管理员  2019-03-26 22:35

概要:jQuery与React是两个非常流行的库,在平时的开发过程中,我们可能经常会问自己为什么要使用jQuery或React,以及为什么不使用jQuery或React。在前端的各种库层出不穷的时代,我们有时候也会随波逐流。要知道,任何一个库,它只是一个工具,既然是工具,那么就有用到它的地方。既然有很多人在用,说明它还有很高的价值。你没有用到,不代表它过时了,你用到了,不代表它非常流行。

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


React  jQuery  

编辑:myweb   最后更新于:2019-03-26 22:54

点评:代码是你在写,bug也是你在改,用或不用,在于你,轮子也可以重新造,deadline就在那里,不多不少。



声明:本站部分文章系本站编辑转载,转载目的在于加快信息的传递,及时与广大网友分享更多信息,并不代表本站赞同其观点和对其真实性负责。 如涉及作品内容、版权和其它问题,请及时与本站联系,我们将在第一时间删除内容!本站文章版权归原作者所有,内容为作者个人观点,本站只提供参考并不构成任何投资及应用的建议。


联系我:x889@foxmail.com,鄂ICP备14016278号-2
©2016-2019 我的ABC All Rights Reserved.
友情链接: 一起编程网