面试题，react和jquery操作dom的区别，为什么react框架里面不建议使用jquery

Question

react和jquery操作dom的区别，为什么react框架里面不建议使用jquery

Answer 1

题主应该是刚开始入门react， react说白了不操作dom，改操作数据了(状态)，说白了react是通过操作数据(状态)来使页面渲染的。

我们以前使用jquery操作dom，最多的操作就是给dom里塞入数据来达到局部刷新的效果，但是操作dom是很耗性能的。

Answer 2

用过react的基本上都不会用上jq。
之前有个面试官问：你用jq吗？
我：我用react，不用jq。
面试官：怎么会有人不用jq。
我：我用react，不用jq。
面试官：好吧，今天就这样了，你可以先走了。

Answer 3

操作dom成本太高，性能也不好，所以才会有主流框架的虚拟dom，它不是操作dom，而是通过diff算法，先创建虚拟dom，然后当监测到有数据变化的时候，执行diff算法，以最小成本渲染dom。
如果你想知道得更多，建议去深究一下虚拟dom以及diff算法。

Answer 4

因为react是虚拟dom而，jq是操作dom

Answer 5

jQuery 是基于 Dom 的，React 为数据驱动：https://segmentfault.com/q/10...

Answer 6

两种前端框架的诞生年代不同。核心算法也不一样。。jquery主张采用频繁的操作dom。react。vue等框架采用的是虚拟dom。主要以数据来驱动。

Answer 7

我就说两点吧。

第一，思想不一样。react是基于数据驱动的， 也就是说数据决定dom。 因此如果使用jquery的思想直接操作DOM的话，违背了这个思想。

第二，两者共存可能会有意想不到的问题。 假定有这么一种场景：

react的A组件,

function A(props) {
    return <div><div id="jq">我会被jquery操作</div>{props.count}</div>
}

A组件props现在是{count: 1}， 然后你使用jq将id为jq的元素修改了。
然后props变为{count: 2}, react重新渲染，你会发现id为jq的元素恢复到以前的状态了。

解决方式拆一个jq组件出来，并使用shouldComponentUpdate 返回false， 将组件变成不会更新的组件

因此不建议在react等数据驱动的框架中做dom操作。

Answer 8

jquery/原生会把中间一些没用的dom操作都会做一次
react/vue则先对vdom的操作，这些没用的操作都在vdom中进行，操作js比dom高效，得到最终修改的vdom再操作实际的dom

比如1+1 = 1+1-2+2 = 2
jquery/原生会把1+1-2+2的所有操作都做一遍，得出2
react/vue会把1+1-2+2在草稿纸（vdom）上写一次，直接得出1+1=2