Question

在用react的时候老大不让用jquery，为什么

Answer 1

看到这个问题，我本身是拒绝的，因为这东西没啥可比性呀，两个东西的定位就是不一样；但是最近一个朋友用VUE写一个项目的时候掺杂了大量的JQ代码，我帮他review的时候，问他为什么要这样，他回答给我的是：『我对JQ比较熟悉呀，VUE不是就是个view吗？』 

开会呢，随便聊一下，虽然vue不是react，但是两者的原理还是基本类似的，我同时对它俩都有一些开发经验；所以下面是我的看法：

1. react本身是一套前端框架，不像JQ是一套类库

2. react的原理和驱动是通过store流来进行virtual dom比对后进行渲染，完全不需要本人操作dom树

3. react官方文档说的很清楚，react已经干了很多jq会做的事情，    你只需要去了解什么是双向绑定，然后用数据驱动、绑定自定义事件就可以了。

4. 在react中使用JQ，肯定要获取dom节点，也就是必须在组件挂载之后（componentDidMount）后，dom树才会append到页面中，虽然说并无大碍，但是会有一些特殊情况下的冲突，例如：用react和JQ同时操作一个节点的样式的时候，也许就会导致state不同步的问题，这是是最简单的问题请看下面第5条(纯手撸，没测试，！另外就是性能的问题，举一个最简单的例子，没有什么代表性，请想象下，用react和JQ去渲染的分页器，在页面node节点非常多的情况谁的效率会更高《各种浏览器的渲染内核对dom节点都有性能瓶颈，具体请查阅相关文档》？而且如果分页器用JQ实现，分页内容用react实现，JQ每次点击页码的时候先要用react渲染分页内容，然后在重新用JQ设置页码，不麻烦吗？)
   
   

5. import React, { Component } from 'react';
   class MyCompnent extends Component {
       constructor(props) {
           super(props);
           this.state = {isHover: false};
           this.onMouseEnter = this.onMouseEnter.bind(this);
       }
       
       componentDidMount() {
           $("#aaa").on('hover', ()=> {
               $(this).addClass('myHover');
           }); 
       }
       
       onMouseEnter() {
           this.setState({isHover : true});
       }
       
       render() {
           const { isHover } = this.state;
           
           return(
           <div id="aaa" onMouseEnter={this.onMouseEnter} className={isHover? 'hover' : ''}></div>
           );
       }

Answer 2

看我有没有正确理解你这个问题的意思，“在用react的时候老大不让用jquery”，是说“我们用的是React，而且老大不让jQuery和React一起用”吗？
React和jQuery都是做网页的工具，他们的方式不同，但是最终产生的效果都是操作DOM，都用上了React，真的没有必要去用jQuery了，而且两者混用，需要特别小心（并不是说不可能混用），因为React操作的是Virtual DOM然后根据Virtual DOM来修改真正的DOM，加入，React认为Virtual DOM没有修改，但是对应的真正DOM被jQuery修改了，那么React也不会重绘那部分DOM，这可能不是我们想要的结果。
总之，不要给自己找麻烦把React和jQuery混用了。

Answer 3

react 和 vue这些前端框架真的没必要用jq了，jq操作dom消耗性能，咱们要跟着大众的脚步走。

Answer 4

你问问你的老大啊，别人怎么会知道到底为什么