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

谈谈MVC模式和未来

就拿百度来举例吧,首先不去管它采用了什么技术,可以从他的改变来猜测。
以前我们是在首页的搜索框先输入关键词,这时除了弹出个搜索建议外没任何改变,用户敲了回车键或者点搜索按钮就跳转到结果列表页了,若更换关键词,则需要再点搜索按钮,页面刷新给出结果。
现在的百度首页已经做了大幅优化了,来看看整个搜索流程:当我们输入第一个字符时,貌似自动跳到结果页面了,当输入的字符能成关键词了,便列出结果。当我们改变搜索框的关键词,页面又立马更新了结果列表。可以推测技术上采用了某种单页面应用架构,响应速度很快,这更像是一个本地app,大大提高了用户体验。

用MVC模式来分析一下整个过程:

  • 用户和View发生交互
  • View传送指令到Controller
  • Controller完成业务逻辑后,要求Model改变状态
  • Model将新的数据发送到View,用户得到反馈

现在MVC的框架有很多,有些采用了衍生的MVP、MVVM等架构,想搞清楚这几者的区别可参考阮一峰的一篇文章MVC,MVP 和 MVVM 的图示
对于复杂的软件,MVC带来的好处是显而易见的,不仅有合理的架构,给以后的维护也带来很大的方便。
但前端技术总是发展的特别快(可以看看这篇文章The Future of JavaScript MVC Frameworks),MVC中使用模板进行渲染,通过双向绑定使得应用复杂度增加了,而Facebook的React.js采用组件化的形式,每当有操作进行数据更新,就对整个页面进行渲染,避免了复杂的状态维护,可以参考JavaScript与有限状态机这篇文章。而我前面写的一篇文章What happend about Angular2.0表示Angular2.0也在朝着这个方向走。
javascript-mvc

React 框架本身作为MVC当中的V存在, 提供两个功能:

  • 渲染和维护 DOM
  • 监听 DOM 的事件

其他的好处是:

  • React Component 设计得非常适合模块化
  • Component和DOM得益于Virtual DOM的diff和合并操作, 有性能提升
  • 没有Model的复杂关系, 编写应用逻辑非常清晰
  • 服务端渲染

关于React.js的中文介绍可以参考React.js概览。文中还指出FLUX对MVC做了调整:由原来的数据双向绑定改成了单向的一个循环。双向绑定会导致串联的更新, 一个对象改变导致另一个改变, 这还可能触发更多更新,当应用规模增加, 这些串联的更新使得用户操作结果改变了什么很难预测,而当更新只在单个回路上更新数据, 这个系统整体上就更容易预测了。