jQuery对比React.js的思考

前面的文章或多或少提到了React.js。React.js能带来什么好处?让我们来分析一下常用的jQuery和React之间的不同。

问题描述:

有一个项目列表,每个条目默认带有隐藏着的详细信息。当用户点击某一条就展开并显示该条目的详细信息。其他的条目则变灰。当我们再次点击同一条项目时,就收起,其他的条目恢复到初始状态:收起和黑色字体。我们也可以展开其他条目,来收起之前展开的条目。

2种解决方案:

jQuery (JSBin)

我们的数据和状态包含在了DOM中,并没有结构化。数据,状态,表现之间显得比较冗杂。
我们使用jQuery选择器(像is(‘hidden’).find(‘.details’))。然后我们用hide(),show(),addClass()removeClass()方法直接操作DOM来改变状态。
写完这些代码后过段时间再回来看,需要从头到尾重新阅读一遍代码才能理解。由于功能有限,我可以不用破坏原有代码来重构这个功能。但是当我们增加复杂的特征后恐怕没那么容易了。
React (JSBin)

我的第一反应是“哇,这么多代码,用这库不够好吧”,真是这样吗?我们来分析一下:

  • 数据漂亮地独立了出来,存到PRODUCTS这个数组中
  • 所有状态用expandedProductId这个变量
  • 所有的渲染逻辑写在了render方法中
  • 我们能从头到尾阅读代码
  • 快速浏览代码后容易理解代码所做的事情

结论

这个例子比较简单,但能够显示出两个库是如何帮助你把你所关注的部分分离出来,React无疑是更好的选择,它让我们把数据抽离出来,注意力集中在这些数据的处理上,至于页面的渲染,就交给React吧。
原文:jQuery versus React.js thinking

1 Comment

  1. Hi, this weekend is good for me, because this
    moment i am reading this fantastic educational article here at my home.

    回复回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注