首页 > 代码库 > AngularJS 和 React比较
AngularJS 和 React比较
似乎已经有无数比较这两个流行的JavaScript框架的文章，和往常一样，你能发现来自两个派别的意见。目前看来，大多数情况下，一个开发者的观点，会在他们工作中大多数使用哪个库/框架/SDK等方面，往往是相当激进的。你使用它来工作，你习惯了使用它，你喜欢上了它，然后你就会在互联网上言辞激烈地争论有关于它的信息。
因此会出现一种像“Angular和React哪个更好”这样的问题，这类似于询问两个中的哪个恰好更流行，但这并不总是最佳衡量指标。所以需要选择的新手开发者该怎么办呢？真实情况是一个产品比另一个产品流行不能证明它就是更好的，我们可以看到许多这种例子的产品。
在这篇文章中，我不会询问哪个更好，而是通过例子比较这两个著名的框架，并让读者选择它们更喜欢的那个。因为在每一种各自的“代码风格”里面存在一个显著的差别。
Demo - Data Grid
我想创建一个简单的data grid而且希望可以增加、移除和更新在网格里面的数据，并且能够以JSON对象的方式来发送网格里面全部的数据（供服务器处理）
如下图
使用Angular实现 —— 分而治之
Angular JS基于MVC设计模式。我们先用Javascript创建一个控制器：
var app = angular.module("myApp", []);
app.controller("ResourceController", function($scope) {
$scope.resources = [{‘ResourceAddress‘: ‘http://www.discoversdk.com‘, ‘ResourceDescription‘:‘Great site‘}];
$scope.RemoveResource = function (index) {
$scope.resources.splice(index, 1);
}
$scope.AddResource = function (newres) {
if ($scope.resources == null) {
$scope.resources = {};
$scope.resources = [];
}
$scope.resources.push(
{
ResourceAddress: newres.ResourceAddress,
ResourceDescription: newres.ResourceDescription,
});
newres.ResourceAddress = "";
newres.ResourceDescription = "";
}
$scope.ShowRes = function () {
alert(JSON.stringify($scope.resources));
}
});
然后将标识的HTML文件与上面代码相关联：
<div ng-app="myApp" ng-controller="ResourceController">
<fieldset >
<h3>Add Resources</h3>
<span >Description:</span>
<input type="text" ng-model="newres.ResourceDescription" style="width:200px;" />
<span > URL:</span>
<input type="text" ng-model="newres.ResourceAddress" style="width:340px;" />
<a class="btn" href="http://www.mamicode.com/#" ng-click="AddResource(newres)">Add</a><br/>
<h3>List of Resources</h3>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th>Description</th>
<th>URL</th>
<th></th>
</tr>
<tr ng-repeat="res in resources">
<td><input style="width:200px;" type="text" ng-model="res.ResourceDescription" /></td>
<td><input style="width:440px;" type="text" ng-model="res.ResourceAddress" /></td>
<td><a class="btn" ng-click="RemoveResource($index)">Remove</a></td>
</tr>
</tbody>
</table>
<a class="btn" href="http://www.mamicode.com/#" ng-click="ShowRes()">Show</a>
</fieldset>
</div>
然后用CSS文件添加样式：
body
{
font-family:Arial;
color:#3a3a3a;
}
table
{
border:none;
text-align:left;
margin-bottom:20px;
}
tr th
{
background-color: #3b97d3;
color: #fff;
padding: 5px;
border-right: solid 1px #3b97d3;
border-left: solid 1px #fff;
}
tr th:first-child
{
border-left: solid 1px #3b97d3;
}
tr td
{
padding:5px;
padding: 5px;
border-right: solid 1px #d4d4d4;
}
tr td:first-child
{
border-left: solid 1px #d4d4d4;
}
table tr:last-child td
{
border-bottom: solid 1px #d4d4d4;
}
input[type="text"]
{
height:20px;
font-size:14px;
}
a.btn
{
color:#fff;
background-color:#3b97d3;
padding:0px 10px;
height:26px;
display:inline-block;
line-height:26px;
text-decoration:none;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
cursor:pointer;
}
a.btn:hover
{
background-color:#73c7ff;
}
你可以点击这里查看和运行代码
使用React实现——具有层次的GUI
我们通过React用层次结构组件构建用户界面，这主要的好处是代码复用
主要的区别是HTML,JavaScript,CSS代码混合到一起，但如果我们想在新的页面重用这个组件，我们只需要复制这一块的代码
所以在React里面，在我们的表格中我们这样在每一行构建一个List Item
var ResourceListItem = React.createClass({
getInitialState: function() {
return {ResourceDescription: this.props.children.ResourceDescription, ResourceAddress: this.props.children.ResourceAddress};
},
removeItem: function(e, index){
this.props.removeItem(resources.indexOf(this.props.children));
},
updateDescription : function(e){
resources[resources.indexOf(this.props.children)].ResourceDescription = e.target.value;
this.setState({ResourceDescription: e.target.value});
},
updateAddress : function(e){
resources[resources.indexOf(this.props.children)].ResourceAddress = e.target.value;
this.setState({ResourceAddress: e.target.value});
},
render: function(){
return (
<tr>
<td><input type="text" value=http://www.mamicode.com/{this.state.ResourceDescription} onChange={this.updateDescription} />{this.props.index}
<td><input type="text" value=http://www.mamicode.com/{this.state.ResourceAddress} onChange={this.updateAddress} />
<td><button onClick={this.removeItem.bind(null, this.props.children)}>remove</button></td>
</tr>
);
} });
接着我们构建表格组件：
var RecourceList = React.createClass({
render: function() {
var that = this;
var st = {
backgroundColor: ‘#3b97d3‘,
color: ‘#fff‘,
padding: ‘5px‘,
borderRight: ‘solid 1px #3b97d3‘,
borderLeft: ‘solid 1px #fff‘
};
var st2 = {
padding: ‘5px‘,
borderRight: ‘solid 1px #d4d4d4‘,
width: ‘250‘
};
var createItem = function(itemText, index) {
return (
<ResourceListItem removeItem={that.props.removeItem} key={index}>{itemText}</ResourceListItem>
);
};
return (
<table>
<thead>
<tr style={st}>
<td style={st2}>Description</td>
<td style={st2}>Url</td>
<td></td>
</tr>
</thead>
<tbody>
{this.props.items.map(createItem)}
</tbody>
</table>
)
} });
然后我们用同样的方式添加网格组件并声明我们的应用:
var MainApp = React.createClass({
getInitialState: function() {
return {items : resources};
},
addItems: function(newItem){
resources = resources.concat([newItem]);
this.setState({items: resources});
},
removeItem: function(itemIndex){
resources.splice(itemIndex, 1);
this.setState({items: resources});
},
show: function(){
alert(JSON.stringify(resources));
},
render: function(){
return (
<fieldset>
<div>
<h3>Add Resources</h3>
<AddResourceForm onFormSubmit={this.addItems} />
<a href="http://www.mamicode.com/#" onClick={this.show}>Show</a>
<h3>List of Resources</h3>
<RecourceList items={this.state.items} removeItem={this.removeItem} />
</div>
</fieldset>
);
} });
你可以点击这里查看并运行代码（要注意的是jsfiddle的react支持有一点限制因此它会更改代码，你需要选择常规的JavaScript并选择回退JavaScript7来运行它）
原文：http://www.discoversdk.com/blog/angular-js-vs-react-by-example 作者：liran bh
AngularJS 和 React比较