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

  • Zef Hemel
  • 臧秀涛

2013 年 6 月 8 日

话题:JavaScriptFacebook语言 & 开发

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

JavaScriptFacebook语言 & 开发