AngularJS和React的比较介绍

发表于   |   分类于   |  

原文地址：https://medium.com/@kellywhiting/a-comparative-introduction-to-front-end-frameworks-angularjs-and-react-dd7c7410afc0

我一直在努力提高自己对AngularJS和React这两大前端框架的理解力和掌握能力，因为它们在硅谷看上去似乎是最受欢迎的。当然，React似乎是这其中的领先者。像Facebook，Instagram，Airbnb，Dropbox，ProductHunt，Netflix都在使用它。AngularJS在Google，PayPal，YouTube，Vevo，Upwork都有落地项目中使用。

因此如果你也正在尝试使用这两框架中的一个或二者都想，那这篇介绍的目的就是帮助大家去理解它们的基本实现。作为研究学习的开始，我已经把一个应用程序设置分成了4个步骤：

  1. 用Properties和Methods建立一个Controller

  2. 初始化和渲染

  3. 在Scopes间传递变量

  4. 添加事件

一旦你掌握了所有的知识，你可以自己决定你更喜欢哪一个框架。分享你的评论让我知道你是怎么认为的。

作为开始，我将做一个MVC(Model-View-Controller)架构模式的快速总结。以下是我最喜欢的一种交互视觉解释，因为它也包含了数据库和客户端或者路由的关系。通常来说，MVC设计模式的实现是为了在函数之间建立一个清晰的分离。控制器Controller处理程序逻辑和客户端交互。模型层Model处理真实的数据。视图层View管理着客户端的表现层的页面渲染。当然这种设计模式是一个标准化的概念，实际上，每一个框架的实现都有它自己独特的方式。

来源: CodeBox.in

AngularJS

AngularJS是MVW (Model-View-Whatever)模式的一个典型的例子，它使Model层和Controller层结合在一个文件中，同时也介绍了ng-xxx的指令directives的使用，以及为一个给定节点确定某些属性和绑定函数，以便于Angular知道如何去处理它们。想要建立一个基本的Angular程序你可以执行完我的这四个步骤，可以看以下的代码。

1
//myJSFile.js
1
2
3
4
5
6
7
8
9
angular.module('myApp', [])
  .controller('controllerName', function() {
    this.myGreeting = 'hello';
    this.greetingsArray = ['goodbye', 'welcome'];
  }
  this.pickGreeting = () => {
    console.log('select this greeting');
  }; 
});
1
//subComponent.js
1
2
3
4
5
angular.module('myApp')
  .component('subComponent', {
    bindings: {select: '<', greetings: '<'},
    templateURL: 'filePath/templates/subComponent.html'
  });
1
<! html file of parent component>
1
<html ng-app='myApp'>
1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
    `<script src='https://ajax.googleapis.com/ajax/libs/angularjs/ 1.6.5/angular.min.js'>`</script>
    `<script src='filePath/myJSFile.js'>`
    `<script src='filePath/subComponent.js'>`
</head>
  <body>
    <div ng-controller='controllerName as ctrlName'>
      <input type='text' ng-model='ctrlName.myGreeting'     placeholder='Text here will display below'>
      <h1>{{ctrlName.myGreeting}}</h1>
      <subComponent select='ctrlName.pickGreeting' greetings='ctrlName.greetingsArray'/>
    </div>
  </body>
</html>
1
<! html file of subComponent>
1
2
<li ng-repeat='eachGreeting in $ctrl.greetings'></li>
<a ng-click='$ctrl.select()'>Click here to Select</a>

Step 1: 用Properties和Methods建立一个Controller

  • 使用一个文件名启动.js文件，以便于你的HTML文件能够和JS文件建立联系。

  • 创建一个包含所有属性和函数（包括匿名函数）方法的控制器controller，这里所有的属性和函数方法都会在.html文件中被使用。如果你仅仅有由一个组件形成的.js文件或者是有多个子组件构成的.js文件似乎看上去控制器controller的设置有稍微的不同。我这里展示了一个多子组件结构的例子。

Step 2: 初始化并且渲染页面

  • 初始化.html文件中的标签以及让页面中的angular生效。

  • 插入一个script标签用来载入Angular库。

  • 插入一个script标签用来连接包含所有控制器逻辑的.js文件。

  • 在子组件文件中添加一个templateURL属性用来指明这个.html文件是否该被渲染。

Step 3: 在Scope间传递变量

  • 在控制器中属性和方法需要给定联系通过给一个或别的节点插入指令。

  • 在任何元素中使用双括号来注入动态文本内容，通过HTML文件以及.js文件中的模型层的数据绑定。

  • 在子组件之间传递参数需要在.js文件中绑定对象和在.html文件的节点上达成一种匹配。在一个.html文件中指定参数和方法将被传给另一个子组件文件中。在例子中，标记为subComponent将和控制器中的pickGreeting建立关联，在子组件中，指定数据被传递的方式。这个例子还包括了可迭代节点的一种绑定方式。这里有很多可被添加的指令的类型。甚至你可以定义自己的指令。

React

React使用JSX通过连接HTML和JS代码在一个单文件中来使得代码更具可读性。很多都说React其实只是MVC中的V层，但实际上在严格作用域规则下它确实仍然保持着数据和逻辑。React处理所有的数据和逻辑在一个单页文件中来创建组件并返回HTML代码进行页面渲染。可以看下如下的代码片段。

1
//.js file - stateless component
1
2
3
var SubComponent = (props) => (
  <div><h1>First Item is still: {props.myItem}</h1></div>
);
1
//.js file - stateful component
1
2
3
4
5
6
7
8
9
10
11
class ClassName extends React.Component {
  constructor(props) {
    super(props);
    this.state = {items: []};
  }

  onItemClick( ) { 
    this.setState({ 
      items: this.state.items.concat(['hello']) 
    }); 
  }
1
2
3
4
5
6
7
8
 render () { 
    return (
      <div><h1>First Item: {this.state.items[0]}</h1>
      <SubComponent myItem={this.state.items[0]} />
      <li onClick={this.onItemClick.bind(this)}>Click to Add an Item
      </li></div>); 
  }
};
1
ReactDOM.render(<ClassName propName={window.method}, document.getElementById('appName'));
1
2
3
4
5
6
7
8
9
10
11
<! html file of component>
<head>
  `<script src='https://fb.me/react-dom-0.14.6.js'>`</script>
  `<script src='https://fb.me/react-with-addons-0.14.6.js'>`</script></head>
<body>
  <div id='appName'>
    <h1>My App</h1>
  </div>
  `<script src='filePath/myJSFile_stateful.js'>`</script>
  `<script src='filePath/myJSFile_stateless.js'>`</script>
</body>

Step 1: 用Properties和Methods建立一个Controller

  • 创建一个继承自React component的组件。它可是一个无状态的函数组件也可以是有状态类的组件，有状态类组件需要一个渲染方法。

  • 关于组件的html代码块必须以匹配的标签开始和结束，因此我建议都以a开始和结束。

Step 2: 初始化并且渲染页面

  • 引入两个script标签用来加载React库。你可以使用我例子中的也可以下载包并且在文件中引入路径。

  • 引入一个script标签用来引入你自己包含了控制器逻辑和数据的.js文件。

  • 在.js文件底部调用ReactDOM渲染方法并通过传递两个参数绑定节点和组件变量：第一个参数是一个在.js文件中创建的class标签用来传递全局作用域下的数据和方法，第二个参数是html中创建的id。

Step 3: 在Scope间传递变量

  • 通过关键词props来在程序间传递变量，它管理着组件和model层间的scope。对于一个无状态组件就像步骤一里描述的一样，对于一个有状态组件，利用构造器去调用super()为的是在父类中扩展构建方法和设置状态变量。如果你想在构造器中访问到this可以把props作为参数传递到父类。

  • 在包含渲染方法的html代码中使用state去访问state变量。

Step 4: 添加事件监听

  • 在类组件中创建函数方法去处理事件。

  • 给HTML元素上添加事件处理函数，确保他们都绑定在了this上并且在运行时是你期望的效果。

坚持原创技术分享，您的支持将鼓励我继续创作！