我们创建了一个对象 firstName, lastName, and fullName properties. 由于Ember正在观察属性变化，我们必须指定它 fullName depends on the firstName and the lastName. To do this we added .属性(“firstName”,“姓”) when we defined the fullName.

After two seconds, person.设置(“firstName”、“哈利”); is executed. 这触发了视图及其绑定的更新.

现在让我们在React中做同样的事情.

// EXAMPLE USING REACT\n\nvar CurrentUser = React.createClass({\n  render: function() {\n    return 
The current user is: {this.props.user.fullName().toUpperCase()}
;\n  }\n});\n\nvar person = {\n  firstName: 'John',\n  lastName: 'Doe',\n  fullName: function() {\n    return this.firstName + ' ' + this.lastName;\n  }\n};\n\nvar currentUser = React.render(, document.body);\n\nsetTimeout(function() {\n  person.firstName = 'Harry';\n  currentUser.记者({用户:人});\n}, 2000);\n

尽管Ember代码简单易读，但很明显React在简单性方面更胜一筹. The person 是一个普通的JavaScript对象，带有 fullName simply being a function.

No Templating

每个可选框架都有不同的模板处理方式. 其中一些使用编译成JavaScript的字符串，而另一些则直接使用DOM元素. 它们中的大多数使用自定义的HTML属性和标签，然后将其“编译”成HTML.

模板不是JavaScript代码的一部分. 正因为如此，每个选择 needs 一种表示常见操作、条件、迭代、调用函数等的自定义方式. 它们最终都创造了一种开发人员必须学习的新的伪语言.

React中没有模板，一切都是普通的JavaScript.

React使用JavaScript的全部功能来生成视图. 组件的呈现方法是一个JavaScript函数.

JSX可以作为一种预处理器，将“类html语法”转换为普通的JavaScript, 但是JSX是可选的，您可以自由地使用没有任何预处理器的标准JavaScript. 您还可以利用现有的JavaScript工具. 编译器、预处理器、类型注释、最小化、死代码消除等.

让我们再用一个具体的例子来比较React和另一个视图状态管理框架.

下面的教程是使用 AngularJS 列出标签和每个标签的tweet数. 该列表按计数排序，如果没有标签，则显示一条消息.

\n\n
\n  
 0\">\n    
\n      {{hashTag.name}} - {{hashTag.tweetCount}} tweets\n    
\n  
\n  No hashtags found!\n
\n

为了能够列出这个列表，开发人员必须了解 AngularJS directives, ng-show and ng-repeat. 然后他需要学习 AngularJS filters to understand orderBy. 像输出列表这样简单的事情要做很多工作!

现在让我们考虑一下React的例子，它做了同样的事情:

// EXAMPLE USING REACT\n\n函数byTweetCountDesc(h1, h2) {\n  return h2.tweetCount - h1.tweetCount;\n}\n\n//...\nrender: function() {\n  if (this.state.hashTags.length > 0) {\n    var comps = this.state.hashTags.sort(byTweetCountDesc).map(function(hashTag, index) {\n      return 
\n        {hashTag.name} - {hashTag.tweetCount} tweets\n      
;\n    });\n    return 
{comps}
;\n  } else {\n    return No hashtags found!\n  }\n}\n

即使我们使用“更高级”的方法和JSX, 每个对JavaScript有基本了解的web开发人员都可以很容易地阅读上面的代码并理解它的作用. 标准条件检查使用 if, iteration using map(), 标准的“sort()”对于任何开发人员来说都是很自然的, 所以不需要学习额外的语法或其他概念.

Conclusion

这个React的主要收获.React让你能够专注于实际的视图状态管理，而不是转换, 从而简化您的工作和应用程序.

采用React的学习曲线相当简单. 无需掌握自定义模板语言, 无需担心数据绑定, 一切都归结为描述UI元素的JavaScript函数.

了解更多关于使用React简化应用程序代码的信息, 来看看Steven Luscher的演讲, 用React分解代码.

这里有一些额外的阅读给那些想要迈出下一步并开始使用React的人:

\n
• http://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome
\n