2016-06-14 18 views
1

性能下降,如果我们使用jQuery与reactjs?性能下降,如果我们使用jQuery与reactjs

因为jquery直接更改DOM元素,其中reactjs与虚拟DOM一起工作。

是否有任何示例reactjs与jQuery的?

+2

可能的重复[是否react.js与jQuery/UI组件很好玩](http://stackoverflow.com/questions/21030023/does-react-js-play-nice-with-jquery-ui-components) – Kujira

回答

0

如果我们用reactjs使用jquery,性能会降低吗?

不一定。

因为jquery直接更改DOM元素,其中reactjs与虚拟DOM一起工作。

您说的没错,jQuery没有使用React的虚拟DOM。除了重写jQuery的核心部分来利用它,香草jQuery不会。虽然参与React虚拟DOM的包装组件可以对其进行修补。

这完全取决于您的使用情况。请记住,在虚拟DOM工作结束时,React仍会操作DOM。

您可以在官方React文档的Use React with Other Libraries页面找到最新的官方示例,但无可否认,这些细节很明显。

是否有任何示例reactjs与jQuery的?

如果你看看这个unit of react-training on wrapping DOM[-manipulating] libraries你可以找到一个美丽的,全面的使用ReactJS与jQuery和jQuery UI的例子。

使用这篇文章作为基准的result,你会使用jQuery在及时做出反应的initial mount time到最低限度做DOM工作,并根据需要为造型提供类名,并作出反应的pre-render props changing lifecycle event从变化重新渲染通过阵营。根据需要,您显然可以自由使用其他事件,例如shouldComponentUpdate或手动触发渲染。

您的表现很大程度上与您在重新呈现步骤中所做的操作有关。

这里有一些提示,可以帮助避开一些常见的性能吸血鬼:

  • 确保您缓存选择和功能尽可能
  • 确保让他们没有结果集合成员的身份是正确键控在不断的高速缓存未命中,并因此不断重新渲染
    • 特别是如果您使用单向数据流或不可变数据存储。
    • 某些映射操作始终返回新对象,因此需要额外注意或使用不同的API调用。

除此之外,牢记这两个阵营的最佳实践和jQuery的最佳实践将带你很长的路要走。

在一天结束时,它只是JavaScript - React试图避免不必要的沉重的真正的DOM对象创建/操作,其中jQuery允许滥用它就好 - 但它没有任何性质阻止制作高性能的jQuery应用程序。