介绍
开发流程
Angular 2
Angular 2 已经非常接近成熟的框架了 - 它自带了许多现成的构建块，涵盖了开发 Web 应用程序的大多数常见场景。不同元素的角色也有明确的划分：
- 服务——可注入元素，用于使用来自 API 的数据或在多个组件之间共享状态。
- 组件- 使用服务的用户界面的构建块。可以通过结构指令选择器相互嵌套。
- 指令- 分为结构指令和属性指令。结构指令（例如\*ngFor）操纵 DOM（文档对象模型），而属性指令是元素的一部分并控制其样式和状态。
- 管道- 用于格式化数据在视图层中的显示方式。
- 模块——应用程序的可导出块，将组件、指令、管道、服务和路由隔离在一起。
反应
React 远没有 Angular 2 那么死板。它是一个库，提供构建 Web 应用程序的最基本工具 - HTTP 服务和组件。没有内置路由器或任何设置特定约定的东西。开发人员将使用哪种包来塑造应用程序主要取决于他们的选择。
代码结构
Angular 2
Angular 2 是用 TypeScript 编写的，TypeScript 是 Microsoft 开发的 JavaScript 超集语言。该语言引入了类型、新数据结构和更多面向对象功能，与原生 JavaScript 相比，代码更易于阅读和维护。最初，TypeScript 的语法旨在让人联想到 C#。然而，TypeScript 的最新版本采用了箭头 ( => ) 符号和其他 ES6 特定语法，使 TS 更像 ES6。
使用 TypeScript 会使设置 Angular 2 应用程序变得有些繁琐，因为它会引入额外的配置开销。
反应
React 依赖于 JSX（Java 序列化到 XML），这是一种用于呈现 JavaScript 和 HTML 的 XML 式语法扩展。在语法和结构方面，JSX 看起来像 JavaScript，并且似乎更容易融入 HTML。它允许在 HTMl 标记中混合变量和 JavaScript 数据结构。
为了更清楚地比较 React 和 Angular 2 的代码结构，我们将比较如何构建一个基本的 TODO 应用程序（由Mark Volkmann (mvolkmann)构建的示例应用程序） 。
两个应用程序都使用Webpack进行开发和部署。
在应用程序结构方面，React 和 Angular 2 都需要两个文件 -代表任务列表的TodoList和代表单个任务的Todo 。
让我们从上到下逐一分析TodoList组件（对于 Angular 2 来说分别是todolist.component.ts ，对于 React 来说分别是 todo-list.js ）：
输入
Angular 2
import {Component} from '@angular/core';
import {bootstrap} from from '@angular/platform-browser-dynamic';;
import {TodoCmp, ITodo} from "./todoCmp";
反应
import React from "react";
import ReactDOM from "react-dom";
import Todo from "./todo";
初始化组件
我通过评论发现了这些工具之间的主要区别。
Angular 2
// Used for type of state property in TodoListCmp class.
// Both properties are optional, but preferred as they make
// the code more maintainable.
interface IState {
todos?: ITodo[];
todoText?: string;
}
// This syntax is called a Decorator and is similar
// to Annotations in other languages. Decorators are
// under consideration to be included in ES2016.
@Component({
selector: 'todo-list',
template:` ` /*This is where the markup for the template can be put.
Alternatively, you can reference a html file using templateUrl */
})
export class TodoListCmp {
private static lastId: number = 0;
private state: IState;
constructor() {
this.state = {
todos: [
TodoListCmp.createTodo('learn Angular', true),
TodoListCmp.createTodo('build an Angular app')
]
};
}
反应
let lastId = 0; // no static class properties in ES6
class TodoList extends React.Component {
constructor() {
super(); // must call before accessing "this"
this.state = {
todos: [
TodoList.createTodo('learn React', true),
TodoList.createTodo('build a React app')
]
};
}
创建项目
Angular 2
static createTodo(
text: string, done: boolean = false): ITodo {
return {id: ++TodoListCmp.lastId, text, done};
}
onAddTodo(): void {
const newTodo: ITodo =
TodoListCmp.createTodo(this.state.todoText);
this.state.todoText = '';
this.state.todos = this.state.todos.concat(newTodo);
}
反应
static createTodo(text, done = false) {
return {id: ++TodoList.lastId, text, done};
}
onAddTodo() {
const newTodo =
TodoList.createTodo(this.state.todoText);
this.setState({
todoText: '',
todos: this.state.todos.concat(newTodo)
});
}
如上所示，这两种工具的创建过程非常相似，但 React 的创建过程稍微短一些，而且似乎需要更少的开发人员逻辑。
检测项目状态
Angular 2
get uncompletedCount(): number {
return this.state.todos.reduce(
(count: number, todo: ITodo) =>
todo.done ? count : count + 1, 0);
}
反应
get uncompletedCount() {
return this.state.todos.reduce(
(count, todo) =>
todo.done ? count : count + 1, 0);
}
应对变化
Angular 2
onArchiveCompleted(): void {
this.state.todos =
this.state.todos.filter((t: ITodo) => !t.done);
}
onChange(newText: string): void {
this.state.todoText = newText;
}
onDeleteTodo(todoId: number): void {
this.state.todos = this.state.todos.filter(
(t: ITodo) => t.id !== todoId);
}
onToggleDone(todo: ITodo): void {
const id: number = todo.id;
this.state.todos = this.state.todos.map(
(t: ITodo) => t.id === id ?
{id, text: todo.text, done: !todo.done} : t);
}
反应
onArchiveCompleted() {
this.setState({
todos: this.state.todos.filter(t => !t.done)
});
}
onChange(name, event) {
this.setState({[name]: event.target.value});
}
onDeleteTodo(todoId) {
this.setState({
todos: this.state.todos.filter(
t => t.id !== todoId)
});
}
<span class="hljs-title functi免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
