React 与 Angular 2

2019-01-10 08:00:00 · 飞浪

根据应用程序结构、社区采用情况等了解并评估两种流行的前端 Web 开发工具 - React 和 Angular 2。

介绍

本指南将对两种流行的前端 Web 开发工具 - React和Angular 2进行概述。我们将根据这些工具构建应用程序结构的方法、社区采用情况、性能以及与不同平台集成的能力对其进行评估。

本指南的目标是突出核心差异并了解两种工具之间的相似之处，从而在选择适合给定项目规范的工具时促进决策过程。

开发流程

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

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

React 与 Angular 2

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

// 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') ] }; }

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) }); }

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