- Không tương tác trực tiếp vào DOM, React sẽ thay bạn làm việc đó.
- Nhiều framework hoặc thư viện trước React tương tác trực tiếp vào DOM trong mỗi trang
- Tương tác trực tiếp vào DOM là một công việc tiêu tốn nhiều performance. Nó sẽ tốn thời gian để thay đổi DOM. Trình duyệt sẽ phải thực hiện 2 bước chuyên sâu là: (1) thay đổi 1 phần tử hoặc thêm nó vào cây DOM, (2) sau đó tính toán lại giao diện và tải lại trang web. Việc thay đổi DOM là một thao tác rất tốn tài nguyên.
- React nói rằng hãy để tôi tìm cách tốt nhất để thay đổi DOM bạn chỉ việc mô tả cho tôi app sẽ trông như thế nào. Từ đó trong một app React sẽ có một object state đại diện cho những gì bạn muốn trang web như thế. React sẽ căn cứ vào object state này để thực hiện những thay đổi. Tất cả những gì bạn quan tâm là object state này. Còn việc update DOM hãy để cho React lo giúp bạn.
- Kết quả của việc này sẽ giúp cho app ít phức tạp hơn và thời gian code sẽ giảm đi đáng kể.
2. Xây dựng Website giống như những khối Lego
- Có thể hình dung các component như những khối vuông hoặc hình chữ nhật.
- Ý tưởng này là đặt những components nhỏ cùng nhau để tạo nên một component lớn hơn giống như việc lắp ghép những khối Lego. Bạn sẽ có nhưng component như Header, Navigator, Search, …
- Ta có thể tái sử dụng nhưng component này ở những nơi khác nhau trên trang web. Thậm chí bạn có thể dùng nó ở những project khác 🌝 (ví dụ Material UI, Ant Design họ đã xây dựng những component chúng ta chỉ việc copy code và dùng thôi)
- Chúng ta có object state mô tả dữ liệu ví dụ như trạng thái login là true hoặc false. Dựa trên dữ liệu này chúng ta sẽ có những component để hiển thị tương ứng với những trạng thái này. Về bản chất component chỉ đơn giản là những function(hàm) nhận đầu vào là input hoặc những thuộc tính chúng ta gọi là “props” và trả ra một đoạn HTML nhưng đặt bên trong Javascript. Hoặc component có thể được viết dưới dạng class.
3. Luồng dữ liệu theo một hướng duy nhất.
- Lần đầu tiên render 1 component React sẽ căn cứ vào object state để xác định HTML trả ra của component. React sẽ tương tác trực tiếp vào VirtualDOM (DOM ảo cái này có nhiều người đã định nghĩa tham khảo thêm nhé. 🌝) sau đó từ DOM ảo React tiến hành ánh xạ để cập nhật DOM thật.
- Khi người dùng click một nút ở DOM thật ví dụ như nút logout. Ngay lúc này chúng ta sẽ thay đổi trực tiếp state bằng hàm setState với thuộc tính isLoggedIn. Việc thay đổi state này sẽ làm cho component render lại đúng với luồng ở trên.
- Cứ như thế React react xử lý render theo một luồng duy nhất. Giả sử ta có một bug UI, ta có thể dễ dàng căn cứ vào trạng thái của state để tìm ra nó lỗi chỗ nào. “So easy game”.
