jquery和react的差别到底在哪里?

在重写slickgrid.js的时候,我一直有一种疑惑,究竟应该沿用jquery还是采用react作为视图层面的引擎?说到这里,很多人可能完全还没体会到,jquery和react是同一层面的东西,它们都是用来操作dom,和view层打交道的工具。很多人会立即跳起来,react高端多了,它有virtual dom,不直接和dom打交道。可是说了这么多,真的在开发某个第三方库的时候考虑过这个问题吗?对于撰写一个第三方的组件,它对于使用的开发者而言,无所谓技术框架,它有自己完整的api,因此对于使用者而言,不用深入学习它背后依赖的是jquery还是react。

在选择视图层库时,还有其它的选择,比如一些模板引擎,甚至是框架,但是对我而言,仅考虑jquery和react。它们对比到底有哪些区别呢?

 

Jquery

React

界面构建

$().append()

Jsx+data

操作界面方式

$().doSomething()

setState

编程方式

随机调用

生命周期

获取子节点

$().find()

-

事件响应

$().on()

生命周期+原生事件响应

维护方式

单文件维护

父子组件查找

在构建界面这一点上,react胜出一大截,利用jsx+data的方式构建界面快且理解容易,描述直接。但是在操作界面细节的时候,react则反过来,通过操作state来操作界面,虽然抽象来很多,却在理解直接性上差了很多。

综合之后,我觉得,jquery依然是更好的选择,除了在构建界面上比react差很多以外,其它方面都是比较令人满意的。特别是当项目大到一定复杂程度的时候,react的结构,会让项目维护难度加大。而jquery不存在这种情况,无论你项目多大,jquery都能一针扎在你要操作的那个DOM节点上。

有没有一种方案,可以优化jquery的界面构建过程?例如先通过数据抽象出virtual dom,然后通过virtual dom构建界面,构建过程还是通过jquery,后续的所有维护都通过jquery?

2017-11-16 12:48:38