Tìm hiểu về Virtual-DOM
Thời gian gần đây, trong quá trình tìm hiểu về ReactJS, có một khái niệm được nhắc đến khá nhiều: Virtual-DOM. Vậy Virtual-DOM là gì, nó có những đặc điểm và lợi ích như thế nào? Chúng ta cùng tìm hiểu nhé. 1. Virtual-DOM là gì? Virtual-DOM, đúng như tên gọi của nó, DOM-ảo. Ảo, có nghĩa là ...
Thời gian gần đây, trong quá trình tìm hiểu về ReactJS, có một khái niệm được nhắc đến khá nhiều: Virtual-DOM.
Vậy Virtual-DOM là gì, nó có những đặc điểm và lợi ích như thế nào?
Chúng ta cùng tìm hiểu nhé.
1. Virtual-DOM là gì?
Virtual-DOM, đúng như tên gọi của nó, DOM-ảo. Ảo, có nghĩa là không thật. Nó là một Object chứa các thông tin cần thiết để tạo ra một DOM (Document Object Model).
Hiểu một cách đơn giản, Virtual-DOM giống một bản vẽ, nó chứa toàn bộ các thông tin cần thiết để tạo nên một DOM, chúng ta có thể tạo, sửa, thao tác trên đó mà không cần tác động trực tiếp vào các phần tử DOM trên View.
2. Tại sao chúng ta nên sử dụng Virtula-DOM?
Lợi ích rõ ràng nhất chúng ta có thể nhìn thấy khi sử dụng Virtual-DOM là tốc độ.
Để làm rõ hơn về khía cạnh này, chúng ta sẽ điểm qua một chút về khái niệm Data-binding.
Data-binding có nghĩa là khi dữ liệu của Model thay đổi sẽ kéo theo sự thay đổi ở View và ngược lại, sự thay đổi ở View đồng nghĩa với việc thay đổi dữ liệu của Model.
Ở một số Framework có cơ chế Data-binding như BackboneJS hoặc AngularJS, khi dữ liệu của Model Object thay đổi, nó sẽ xác nhận các event và các View Object liên quan đến sự thay đổi đó, từ đó tác động vào các phần tử DOM trên View và phản ánh sự thay đổi dữ liệu đó.
Ngược lại, đối với những Framework sử dụng Virtual-DOM như ReactJS (Virtual-DOM vừa đóng vai trò là Model, vừa đóng vai trò là View), khi Virtual-DOM thay đổi, chúng ta không cần thao tác trực tiếp với DOM trên View mà vẫn phản ánh được sự thay đổi đó. Do Virtual-DOM vừa đóng vai trò là Model, vừa đóng vai trò là View nên mọi sự thay đổi trên Model đã kéo theo sự thay đổi trên View và ngược lại.
Có nghĩa là mặc dù chúng ta không tác động trực tiếp vào các phần tử DOM ở View nhưng vẫn thực hiện được cơ chế Data-binding. Điều này làm cho tốc độ ứng dụng tăng lên đáng kể - môt lợi thế không thể tuyệt vời hơn khi sử dụng Virtula-DOM.
3. Ví dụ về Virtual-DOM trong ReactJS
Chúng ta có thể viết một ví dụ đơn giản trong ReactJS như sau (tham khảo ReactJS tutorial):
<html>
<head>
<title>Hello React</title>
<script src="https://fb.me/react-0.13.2.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.2.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
var Hoge = React.createClass({
getInitialState(){
return{
style:{
color: "#ccc",
awidth: 200,
height: 100
}
};
},
onChange(){
var style = _.clone(this.state.style);
style.color = "#ddd";
this.setState({ style: style});
},
render(){
return(
<div style={this.state.style} onClick={this.onChange}>xxx</div>
);
}
}
React.render(
<Hoge />,
document.getElementById('content')
);
</script>
</body>
</html>
Ở ví dụ trên, chúng ta đã định nghĩa một component Hoge, bằng method React.createClass(...), sau đó render ra View:
React.render(<Hoge />, document.getElementById('content'));
Khi đó ta có thể viết các methods, các funtions tác động lên component Hoge (thay đổi Model data), View sẽ lập tức được cập nhật cho dù ta không phải động chạm trực tiếp gì vào phần tử DOM trên View.
###4. Kết luận
Trên đây mình đã điểm qua một chút về khái nhiệm cũng như lợi ích của việc sử dụng Virtual-DOM. Hy vọng các bạn có thể tìm thấy những điều bổ ích trong đó.
Thời gian mình tìm hiểu về Virtual-DOM cũng như ReactJS là chưa nhiều, nên chắc chắn còn nhiều thiếu sót, mong các bạn góp ý nhé.
