vi
new
+3
Avatar
Nguyen Van Dung @dung.apatit
154 8 11
Đã đăng vào thg 12 24, 2015 10:02 CH 5 phút đọc
3.5K

So sánh angularjs và reactjs

1. Sơ lược

Trước khi đi vào sự khác nhau giữa angularjs và reactjs, tôi xin khai quát sơ qua về chúng như sau:

  • Angularjs: Nó ra đời từ năm 2009, và sắp có phiên bản 2.0 dự kiến đầu năm 2016 sẽ release. Phiên bản Angular hiện tại dùng nhiều những thuộc tính(attributes) và những thành phần(elements), html để cung cấp tính năng trên nhiều thành phần DOM khác nhau. Những phần này gọi là directives và chúng rất tiện dụng. về cấu trúc khởi tạo của angularjs thì cũng không có gì phức tạp nó chỉ hơi dài 1 chút(bao gồm 1 application và 1 controller và directive nếu có)

    Eg:

<html ng-app="demoApp">
  <head></head>
  <body ng-controller="demoController">
    <test-first />
  </body>
</html>

var app = angular.module("demoApp", []);
app.controller("demoController", function() {
});
app.directive("testFirst", function() {
    return {
        restrict: "E",
        template: "<div>Xin Chao</div>"
    };
});

  • React JS: Là một framework hiển thị view chú ý đến hiệu năng (performance-minded) được tạo ra bởi Facebook. React cũng dùng cái gọi là “DOM ảo” (“virtual DOM”) để tăng hiệu năng bằng cách xuất ra một hiển thị ảo, sau đó kiểm tra sự khác biệt giữa hiển thị ảo và những gì có trên DOM và tạo một bản vá (a patch). Về cấu trúc của react thì đơn giản hơn angularjs, React yêu cầu tạo một class để định nghĩa những HTML cần hiển thị. Đó là những gì chúng ta cần tạo ra trong phần JavaScript.

    Eg:

   <html>
  <head></head>
  <body></body>
</html>

var DemoFirst = React.createClass({
    render: function() {
        return <div>Xin chào</div>;
    }
});
React.render(new DemoFirst(), document.body);

đặc biệt với reactjs thì phần HTML của React thì không có gì đáng để chú ý cả, và nó sẽ không thay đổi trong xuyên suốt bài, nên bạn có thể không cần để ý đến nó nữa.

Trên đây tôi đã tổng hợp qua về khái niện angularjs và reactjs, sau đây tôi sẽ nói đến sự khác nhau giữa chúng

Về chèn dữ liệu

  • Angularjs: Angular chèn dữ liệu là thông qua scopes. scope trong Angular là một đối tượng chứa dữ liệu cho nhiều controls, như directives và controllers. Trên tất cả các scope, có một đối tượng scope root ($rootScope), nó hoạt động như là scope trên cùng, được truy xuất bởi tất cả những thành Angular khác.

    • Một chú ý nhỏ đó là một directive có thể có một trong một vài kiểu scope:
    • Không có scope, nghĩa là directive dùng scope của cha nó (thường là scope của controller).
    • Scope độc lập, nghĩa là directive có scope của riêng nó, hoàn toàn tách biệt với scope của controller. Thường thì, scope của controller được dùng để chèn dữ liệu vào scope độc lập của directive.

    Eg:

   <html ng-app="demoApp">
  <head></head>
  <body ng-controller="demoController">
    <demo-first name="{{name}}" />
  </body>
</html>

var app = angular.module("demoApp", []);
app.controller("demoController", function($scope) {
  $scope.name = "Nguyen Van A";
});
app.directive("demoFirst", function() {
    return {
        restrict: "E",
        template: "<div>Hello, {{name}}!</div>",
        scope: {
          name: "@"
        }
    };
});

  • React JS: React chèn dữ liệu vào views vào lúc khởi tạo class, lúc root view được tạo hoặc thông qua nested view. Bên trong class, dữ liệu được truyền vào và truy xuất thông qua thuộc tính props của ngữ cảnh hiện tại.

    Eg:

  var DemoFirst = React.createClass({
    render: function() {
        return <div>{this.props.name}</div>;
    }
});
React.render(<DemoFirst name="Nguyen Van A" />, document.body);

Nested Views

  • Angularjs: Nested Views trong Angular được hiện thực bằng việc dùng nhiều directives. Một directive có thể tham chiếu tới một directive khác. Chú ý là mỗi directive có thể có scope độc lập của riêng nó.

  • Reactjs: Nested element trong React dễ dùng hơn nhiều so với angularjs. Chúng ta khai báo nhiều classes, rồi tham chiếu class con trong hàm render của class cha.

    Eg:

  var FirstMethod = React.createClass({
render: function() {
    return (<div>
        <div>Name: {this.props.name}</div>
        <div>Address: {this.props.address}</div>
        <NestedView />
        </div>
    );
}
});
var NestedView = React.createClass({
render: function(){
    return <div>Good Bye</div>;
}
});
React.render(<FirstMethod name={"Nguyen Van Dung"} address={"Dong Anh - Ha Noi"} />,document.body);

Event Handlers

  • Angularjs: có các sự kiện chính như

    • Mouse events
    • Keyboard events
    • Change events

    Trong Angular, hàm xử lý sự kiện thường được gán cho nhiều thành phần khác nhau trong view chủ yếu thông qua template trong directives

    Eg: Sự kiện ng-click

  var app = angular.module("demoApp", []);
app.controller("demoController", function($scope) {
});
app.directive("testFirst", function() {
    return {
        restrict: "E",
        template: "<button ng-click='showName();'>Show Name</button><br /><div>{{name}}</div>",
        link: function(scope) {
          scope.showName = function() {
            scope.name = "Nguyen Van A";
          }
        }
    };
});

  • Reactjs: Xử lý sự kiện trong React làm việc thông qua việc thiết lập những thuộc tính tùy chỉnh cho những thành phần HTML, Nổi trội là dùng state.Mỗi class React có state riêng của nó mà bên ngoài không thể sửa đổi. chỉ có thể sửa đổi state của một class/view bằng việc gọi phương thức setState của view’s context

    Eg:

var DemoFirst = React.createClass({
    getInitialState: function() {
      return {
        firstName: ""
      };
    },
      showName: function() {
      this.setState({ firstName: "Hello, " + this.props.name + "!" });
    },
      render: function() {
        return <div>
          <button onClick={this.showName}>SHOW NAME</button>
          <br />
          <span>{this.state.firstName}</span>
        </div>;
    }
});
React.render(<DemoFirst name={"Nguyen Van A"} />,document.body);

Vòng lặp

  • Cả Angular và React đều cung cấp những cách thức để hiển thị views bằng cách lặp qua tập hợp dữ liệu. Với Angular thì dùng ng-repeat. Còn React thì lặp như viết cho javascript

    Eg:

    • Angularjs
var app = angular.module("demoApp", []);
app.controller("demoController", function($scope) {
  $scope.nameArray = ["Dung", "Hung", "Anh"];
});

<html ng-app="demoApp">
  <head></head>
  <body ng-controller="demoController">
    <li ng-repeat="name in nameArray">
      <span>{{name}}</span>
    </li>
  </body>
</html>
  • Reactjs
  var HelloWorld = React.createClass({
    renderName: function() {
      var nameArray = ["Dung", "Hung", "Ha"];
      var itemName =[];
      for (var i = 0; i < nameArray.length; i++)
          itemName.push(<span>{nameArray[i]}</span>);
      return itemName;
    },
      render: function() {
        return <div>
          {this.renderName()}
        </div>;
    }
});
React.render(<HelloWorld />,document.body);

Kết Luận

  • Angular JS và React JS có nhiều khác biệt, nhưng chúng đều có thể thực hiện những việc giống nhau. Với Angular là một framework đầy đủ tính năng hơn nhiều so với React, React thì không hoàn toàn là một framework. Với React, ta viết ít code hơn nhưng làm được nhiều việc, và React có hiệu năng tốt hơn Angular do React cài đặt DOM ảo (virtual DOM). Nhưng cũng phải nói, hỗ trợ cho Angular thì lớn hơn rất rất nhiều, cộng đồng lớn hơn, còn React thì mới phát triển chưa lâu
JavaScript

All rights reserved

Mục lục


Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí