用了React难道真的就不需要用到JQuery了吗?

#1

看了大家很多的想法,很多人都在说React是声明式渲染,当我们把数据渲染到View上的时候我们并不需要去关心如何去操作DOM去渲染数据,从而也就用不到jQuery

或者有的人说,如果使用了React,还需要使用jQuery的话就是React玩的不规范。

但是我在实际使用React开发我的应用时,如果想要实现某些特效,我认为少不了DOM的操作并且必须要使用jQuery去简化DOM的操作。

例如有以下场景:
有一个用户列表,这个列表的每一项包涵用户的avatar、nickname:当我将鼠标移动到某个nickname、avatar上时,将会弹出一个layer层,它的位置会在nickname或avatar的旁边,为此如果想要实现这种效果,我们需要在其它的地方(body下,使用Portal API)渲染一个Layer层组件(默认是hidden的),当我鼠标移动到avatar、nickname时,通过refs 获取avatar、nickname元素,再获取其相较于整个body的偏移量(offset)作为props传入Layer组件(以及visible props),从而让layer绝地定位在对应用户项的avatar、nickname的一旁。
这种情况,原生javascript并没有提供获取元素相较于整个body的偏移量,需要我们手动去实现:使用递归或者while循环通过offsetParent去获取某个元素相较body的offset,如果这么麻烦,我觉得不如直接import $ from ‘jquery’ 再 $(‘el’).offset().left 或 .top 去获取呢,要想实现类似的网页效果,React压根没有提供类似的API,实现起来我只能想到上述方法。

其实还是想说的是,诸如此类的情况,要想实现一些网页特效,我认为必须使用到jquery(这只是我个人的看法)

我想听听大家的看法,希望大家可以就这个话题发起客观的讨论,相互学习!

#2

jQuery 的几个功能, 修改 DOM, 监听事件, 网络请求, 工具函数.

React 提供了 DOM 自动按照 Virtual DOM 更新的方案, 也很方便做事件监听, 大部分情况不要有 jQuery 介入了. 可能会说有好书情况 React 做不到, 可是这种情况用 DOM API 也是可以的啊, 原生 API 只是长一些, 现在也不太多以前那种 DOM API 在不同浏览器不一致的情况.

网络请求, axios 之类的挺多的. 工具函数, lodash 更全面, 其他的库也有, 不是非要 jQuery.

#3

如果考虑到性能问题,jquery也有长处

#4

题主说的这种应该不准确,getBoundingClientRect()API(IE9+)了解一下,最近用这个实现题主提出的类似功能。用不用React或者用不用jQuery,都不是必须的,React或jQuery各种适合场景,想清楚利弊就好了

#5

这是一个代码风格的问题,React 项目中使用 jQuery,总觉得代码组织结构很乱。

其实 React 生态圈也有很多特效库,为了项目维护起来更容易,还是不要混合 React 和 jQuery 了。

蚂蚁金服的特效库了解一下,哈哈哈…
https://motion.ant.design/