Mục đích của bài viết này là giúp bạn hiểu rõ sự khác nhau và ưu điểm của hai framework Angular và React trong việc xây dựng ứng dụng. Angular đã tồn tại lâu hơn React, vì vậy nó đã phát triển thành một khối khổng lồ. Tuy nhiên, React có lợi thế về hiệu suất hiển thị.
Angular JS
Angular đã tồn tại từ năm 2009 và đã trải qua nhiều phiên bản. Phiên bản hiện tại là 1.3.8 và có phiên bản 2.0 được dự kiến ra mắt vào năm 2016. Angular hiện tại sử dụng các thuộc tính và thành phần HTML mới để cung cấp tính năng trên nhiều thành phần DOM khác nhau.
Ví dụ, để khởi tạo một ứng dụng Angular, chúng ta cần tạo một module và một controller, sau đó định nghĩa các directives của chúng ta. Dưới đây là ví dụ về cách chúng ta làm điều này:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.greeting = "Hello, world!";
});React JS
React là một framework hiển thị view được tạo bởi Facebook và chú ý đến hiệu suất. Nhiều framework MVVM khác đã gặp khó khăn khi hiển thị lượng dữ liệu lớn, nhưng với React, điều này không còn là vấn đề. React chỉ hiển thị những gì thay đổi và sử dụng DOM ảo để tăng hiệu suất.
React sử dụng JSX, một cú pháp kết hợp giữa JavaScript và HTML trong một tệp tin. JSX không bắt buộc, nhưng nó giúp dễ dàng xác định các thành phần cần hiển thị. Dưới đây là ví dụ về cách chúng ta làm điều này:
var HelloWorld = React.createClass({
render: function() {
return Hello, {this.props.name}!;
}
});
React.render(Chèn dữ liệu
Angular JS
Angular sử dụng scope để chèn dữ liệu vào directives. Scope trong Angular là một đối tượng chứa dữ liệu cho nhiều controls như directives và controllers. Một directive có thể có scope của riêng nó hoặc sử dụng scope của controller để chèn dữ liệu vào.
app.controller('myCtrl', function($scope) {
$scope.name = 'John Doe';
});
app.directive('helloWorld', function() {
return {
template: 'Hello, {{name}}!',
scope: {
name: '@'
}
};
});React JS
React chèn dữ liệu vào views ngay từ khi khởi tạo class. Dữ liệu được truyền dưới dạng props và truy xuất thông qua thuộc tính this.props trong class.
var HelloWorld = React.createClass({
render: function() {
return Hello, {this.props.name}!;
}
});
React.render(Xử lý sự kiện
Angular JS
Trong Angular, hàm xử lý sự kiện được gán cho các thành phần trong view thông qua directives. Directive ng-click được sử dụng để đăng ký hàm xử lý sự kiện click chuột trong scope của directive.
app.controller('myCtrl', function($scope) {
$scope.greet = function() {
$scope.greeting = "Hello, world!";
};
});
app.directive('helloWorld', function() {
return {
template: ' {{greeting}}'
};
});React JS
Trong React, xử lý sự kiện được thực hiện bằng cách thiết lập thuộc tính tùy chỉnh cho các thành phần HTML. Hầu hết các thành phần của React đều có hàm xử lý sự kiện tương ứng.
var HelloWorld = React.createClass({
greet: function() {
this.setState({ greeting: "Hello, world!" });
},
getInitialState: function() {
return { greeting: "" };
},
render: function() {
return (
{this.state.greeting}
);
}
});Thành phần lồng nhau
Angular JS
Trong Angular, các thành phần lồng nhau được tạo thông qua việc sử dụng các directives. Một directive có thể chứa tham chiếu đến directive khác. Có một khái niệm gọi là transclusion được sử dụng để hiển thị các thành phần con.
app.directive('helloWorldWrapper', function() {
return {
restrict: 'E',
transclude: true,
template: ''
};
});React JS
Trong React, các thành phần lồng nhau dễ dàng hơn nhiều. Chúng ta chỉ cần tạo các class riêng và tham chiếu đến các class con trong hàm render của class cha.
var HelloWorldWrapper = React.createClass({
render: function() {
return {this.props.children};
}
});
var HelloWorld = React.createClass({
render: function() {
return (
Hello, world!
);
}
});Vòng lặp
Cả Angular và React đều cung cấp cách để hiển thị views bằng cách lặp qua tập hợp dữ liệu.
Angular JS
Trong Angular, chúng ta sử dụng directive ng-repeat để tạo ra một danh sách các thành phần.
app.controller('myCtrl', function($scope) {
$scope.greetings = ['Hello', 'Bonjour', 'Hola'];
});
app.directive('helloWorld', function() {
return {
template: '{{greeting}}'
};
});React JS
Trong React, chúng ta có thể sử dụng vòng lặp JavaScript để tạo ra các thành phần.
var HelloWorld = React.createClass({
getInitialState: function() {
return { greetings: ['Hello', 'Bonjour', 'Hola'] };
},
greet: function() {
this.state.greetings.push('Hi');
this.setState({ greetings: this.state.greetings });
},
renderGreetings: function() {
return this.state.greetings.map(function(greeting) {
return {greeting};
});
},
render: function() {
return (
{this.renderGreetings()}
);
}
});Kết luận
Angular JS và React JS có nhiều khác biệt, nhưng cả hai đều có thể thực hiện những việc tương tự. Angular là một framework đầy đủ tính năng hơn, trong khi React có hiệu suất tốt hơn nhờ việc sử dụng DOM ảo. Tuy nhiên, mức độ hỗ trợ cho Angular lớn hơn và cộng đồng phát triển cũng lớn hơn. Tùy thuộc vào yêu cầu và ưu tiên của dự án, bạn có thể chọn Angular hoặc React để phát triển ứng dụng của mình.
Nguồn tham khảo: Link