Goal
Giới thiệu cấu trúc quan hệ Component và việc re-render lại cấu trúc đó khi có thay đổi.
Stateful Component vs Stateless Component
- Stateful Component: Component có chứa
state(need a memory) - Stateless Component: Component không chứa
state(no need memory)
Stateful và Stateless Component trong Reactjs
Đặc trưng mô hình trong Reactjs là theo hướng Stateless Component.
Các Component sẽ nhận data từ Component cha, từ đó tạo nên cấu trúc View. Điểm quan trọng ở đây là tự thân Component sẽ không chứa state. Nhờ vào việc output View theo input từ bên ngoài mà việc quản lý, tái sử dụng và testable cho Componennt có thể thực hiện được.
Tất nhiên, nếu tất cả các Component không chứa state thì nó cũng giống như một trang HTML tĩnh nên việc chứa state trong Component là cần thiết nhưng mà nên giảm thiểu những Component như vậy mà cần kết hợp các Stateless Component lại với nhau.
Thông thường thì chỉ có Root Component trong cấu trúc dạng tree mới chứa state và truyền state đó xuống các component con và tạo nên cấu trúc tree.
Khi mà state của Component có sự thay đổi thì tree sẽ tự động tái cấu trúc cho nên không cần phải update lại view một cách thủ công.
Về cơ bản thì ngoài Root Component ra thì không cần phải chứa state cũng OK nhưng mà có những trường hợp cũng phải chứa trạng thái thay đổi do User action
Virtual DOM
Việc chỉ dùng Root Component chứa state và nếu state đó thay đổi thì tái cấu trúc lại toàn bộ View thì đối việc thiết kế rõ ràng sẽ đơn giản nhưng mà chỉ một phần có thay mà toàn bộ DOM tree phải re-render lại thì về mặt performance sẽ rất tệ. Cho nên Reactjs đã đưa Virtual DOM vào trong cấu trúc của mình.
Nói một cách đơn giản thì Virtual DOM là một Javascript Object chứa DOM tree. Trong trường hợp data có thay đổi thì Reactjs sẽ tính diff của Object đó rồi chỉ re-render những Real DOM ở mức tối thiểu nhất.
Trong Reactjs, React.createClass sẽ tạo Component, render() method của Component sẽ return “định nghĩa” Virtual DOM. Virtual DOM được tạo từ React.createElement or bằng syntax JSX
Reactjs Performance
Tham khảo Benchmark dưới đây về kết quả so sánh:
- Backbone.js: chỉ render DOM nào có thay đổi
- Backbone.js: render toàn bộ DOM nếu có bất cứ thay đổi nào.
- React.js: render phần DOM có sự thay đổi thông qua Virtual DOM khi có thay đổi gì.
Theo benchmark thì tốc độ Reactjs sẽ theo thứ tự như sau:
2 (chậm nhất) < 3 < 1 (nhanh nhất) .