当今流行的 React.js 适用于怎样的 Web App？

外村和仁（株式会社ピクセルグリッド）当今流行的 React.js 适用于怎样的 Web App？

React.js是什么？

React.js是Facebook开发的框架。

http://facebook.github.io/react/

官网上的描述是「A JavaScript library for building user interfaces」 React.js是用来构造UI的框架。不是一个framework，只是用来构造UI的library，提供MVC中View的机能。

采用了它进行开发的自然有Facebook本身，Instagram、Yahoo、Airbnb等等，是当今备受瞩目的library。

React.js的特征

为了了解React.js的特征，先与其他library或framework相比较。比如像Todo MVC这样对框架进行选型，以发送表单为例子进行实装试验。

jQuery

单纯jQuery的写法：

// 点了Submit之后

$('form').on('submit', functino() {

// 创建dom元素

var $li = $('<li>');

// ...

// 追加到list

$('ul').append($li);

});

可是，这样被DOM的结构所限制，要追加什么功能都非常麻烦，测试case也不好写。

Backbone.js

Backbone.js可以一定程度上解决类似问题。Backbone.js把管理数据的Model、与管理表现的View分开、然后把View分成各种组件来设计。比如下面这样：

var FormView = Backbone.View.extend({

onSubmit: function() {

// 创建data后只要追加到model

this.collection.add(data)

}

});

var ListView = Backbone.View.extend({

initialize: function() {

// model更新后追加到list

this.collection.on('add', this.render);

}

});

对FormView或ListView来说、都属于UI的一类功能、同类型的东西都只要调用组件就可以实现。

Backbone.js把数据和组件分开管理以后就更容易管理，但View的更新还需要手动来写仍然非常麻烦，Model与View之间传递事件也变得复杂，代码量扩大的时候就会出现很多问题。（和Backbone.js类似的library比如Marionette和Chaplin、本质上问题是一样的）

Angular.js、Vue.js

Angular.js、Vue.js为代表的、所谓MVVM系library的特征是数据一旦发生改变就会自动更新显示。

</form>

<ul>

</li>

</ul>

// Controller

$scope.onSubmit = function() {

// data更新后自动就显示了

$scope.list.push(newItem);

};

这样记录了HTML中用到的数据、JavaScript就自动把数据更新上去显示了。但是，这种类型的library在规模变大的时候要管理状态是很难的。

React.js

jQuery也好Backbone.js、Angular.js也罢，上面说了都不适应管理大规模的代码。虽然严谨的设计仍然可以成就方便管理的应用。但是，就违背了开发这些框架的本意，代码变得臃肿，设计也不简单。

React.js是规模再大也能提供便利管理的library。相反的，开发高速的小型应用Backbone.js或者Vue.js就更为合适。

React.js的特征是尽量做到组件无状态，便利的对组件进行管理：

var Form = React.createClass({

onSubmit: function() {

// 通知父级数据有更新

render: function() {

return <form onSubmit={this.onSubmit}>...</form>;

}

});

var List = React.createClass({

render: function() {

// 从父级拿到数据进行更新

return <ul>{this.props.list.map(...)</ul>;

}

});

各组件都从父级拿数据然后再去创建View。这一点很重要，组件自身不需要维持状态。通常根据从外部得到的输入进行输出或者测试的情况(大多数情况来自父级组件)，管理和复用性都很高。