BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

Facebook发布用户界面库React,业界褒贬不一

| 作者 Zef Hemel 关注 0 他的粉丝 ,译者 臧秀涛 关注 2 他的粉丝 发布于 2013年6月9日. 估计阅读时间: 5 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!

Facebook开源了React,这是该公司用于构建反应式图形界面的JavaScript库,已经应用于构建Instagram网站Facebook部分网站。最近出现了AngularJSMeteorJSPolymer中实现的Model-Driven Views等框架,React也顺应了这种趋势。React基于在数据模型之上声明式指定用户界面的理念,用户界面会自动与底层数据保持同步。与前面提及的框架不同,出于灵活性考虑,React使用JavaScript来构建用户界面,没有选择HTML。

JSX是JavaScript的一种支持XML字面量的扩展,尽管React并不依赖JSX,但是React网站上的示例代码都依赖它。比如,下面是以React表示的很有代表性的“Hello World”程序,其中用到了JSX:

/** @jsx React.DOM */
var HelloMessage = React.createClass({
  render: function() {
    return <div>{'Hello ' + this.props.name}</div>;
  }
});

React.renderComponent(<HelloMessage name="World" />,
                      mountNode);

嵌入的XML会在预编译阶段被翻译为正常的JavaScript DOM API调用。

自从发布以来,React库受到了广泛的批评。批评大致可以分为两类,一类是说该库把视图和逻辑混了起来,另一类是说与现有框架相比它的代码冗长。下面我们分别来看一下。

(明显)把视图和控制器混了起来

Reddit用户rhysbrettbowen写道

我理解JSX不是必需的,不过我们用了很长时间才把逻辑从HTML中抽取出来,现在我们进步了,难道要把HTML再放到逻辑里去吗?

没有很好地把HTML从业务逻辑中分离出来,这是最大的问题。如果HTML和业务逻辑分离,就可以让设计人员负责HTML和样式,而编程人员负责代码,并向模板提供钩子。

Facebook React团队的Peter Hunt在其博客中对此作出了回应,React并没有试图把应用程序的视图和逻辑混起来:

我们都还记得过去将PHP混在HTML中的那些日子,代码很难维护,安全也是事后诸葛亮。我们可不想走老路。

从那时开始,为防止工程师再犯这种错误,我们已经开发了很多客户端和服务器端的模板语言。然而,这些模板语言都是有代价的:用户界面构建起来更为困难。就像交替变换表格中每行的颜色这么简单的事情都要在多种语言中做些处理。

我们应该做的是接受这一点——用户界面会越来越复杂,我们需要一门真正的编程语言并借助其全部表现能力来构建上规模的用户界面。

React就是信奉这一理念的库。React仍然鼓励划分关注点:组件只负责传统的MVC应用中“视图”的角色。然而,不同于过于简单的模板语言,你应该使用JavaScript来构建抽象和复用代码。

与现有框架相比代码冗长

React发布之后不久,Vlad Yazhbin贴出了将React教程中的代码翻译为AngularJS的结果,证明AngularJS代码比原始的React代码更简洁。不过也有人指出,这种比较并不是完全公平的。

即便如此,Facebook开源了他们开发的更多的库,这种努力开发者社区是非常欣赏的。Facebook之前备受瞩目的开源产品包括Hiphop PHP编译器Tornado。其中Tornado是一个高效的异步Python Web框架,用于构建实时应用,最初是为了推动FriendFeed这个网站而构建的。

React已经放到了github上,开发者可以下载开发构建和产品构建等不同版本

查看英文原文:Facebook's React JavaScript User Interfaces Library Receives Mixed Reviews

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

就像交替表换表格中每行的颜色 by 臧 秀涛

交替表换->交替变换

React真是很不错的框架 by hua wen

我翻译了部分文档,可以看看
cdjs.sinaapp.com/?cat=3

丑陋的语法 by Yang Bob

这个语法太难看了,应该把模板分离出去。

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

3 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT