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

小刘
  • 528

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

回复
阅读 3.4k
8 个回答

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

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

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

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

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

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

我就说两点吧。

第一,思想不一样。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操作。

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

宣传栏