Ngày 2: Cách React cập nhật UI
Hôm qua tôi đã tìm hiểu React làm được gì. Hôm nay tôi tìm hiểu cách nó thực hiện điều đó.
Tôi từng thắc mắc làm thế nào React biết chính xác cần thay đổi gì trong UI. Nếu bạn thay đổi một từ trong một đoạn văn, liệu React có xây dựng lại toàn bộ trang không? Không. Nó sử dụng một quy trình thông minh để duy trì tốc độ nhanh.
Dưới đây là phân tích về chu kỳ cập nhật của React.
Reconciliation và Diffing
Reconciliation là chiến lược. Diffing là phương pháp thực tế. React so sánh cây Virtual DOM mới với cây cũ.
Việc so sánh hai cây là một thử thách đối với máy tính. Một thuật toán tiêu chuẩn sẽ quá chậm. React duy trì tốc độ nhanh bằng cách đưa ra hai giả định:
- Nếu kiểu của một phần tử thay đổi, React sẽ hủy bỏ cây cũ và xây dựng một cây mới.
- Nếu kiểu vẫn giữ nguyên, React chỉ cập nhật các thuộc tính đã thay đổi.
Điều này cho phép React chạy trong thời gian O(n). Điều này giúp các bản cập nhật có cảm giác tức thì.
Hai giai đoạn
React chia công việc của mình thành hai bước riêng biệt:
Render Phase Đây là giai đoạn lập kế hoạch. React gọi các component của bạn và tính toán các thay đổi. Ở bước này, nó không chạm vào Real DOM. Hãy coi nó như một kiến trúc sư đang vẽ bản thiết kế.
Commit Phase Đây là giai đoạn thi công. React áp dụng các thay đổi đã tính toán vào Real DOM. Phần này diễn ra đồng bộ (synchronous). Một khi đã bắt đầu, nó sẽ không dừng lại cho đến khi công việc hoàn tất.
Quan trọng: React cập nhật DOM, nhưng trình duyệt mới là bên vẽ các pixel. React xử lý cấu trúc. Trình duyệt xử lý việc hiển thị hình ảnh (visual rendering).
React Fiber
Trước React 16, việc render diễn ra đồng bộ. Nếu một lần render mất nhiều thời gian, trình duyệt sẽ bị đóng băng. Bạn sẽ không thể cuộn trang hay gõ phím.
Fiber đã thay đổi điều này. Fiber là engine quản lý Render Phase. Nó cho phép React:
- Tạm dừng công việc và quay lại sau.
- Ưu tiên các cập nhật khẩn cấp như việc người dùng gõ phím thay vì dữ liệu chạy ngầm.
- Chia nhỏ công việc thành các phần nhỏ.
Virtual DOM là cấu trúc dữ liệu. Fiber là thuật toán hoạt động trên dữ liệu đó.
Tóm tắt luồng hoạt động:
• State thay đổi. • Render Phase: React lập kế hoạch thay đổi thông qua Diffing. • Commit Phase: React cập nhật Real DOM. • Trình duyệt: Layout, Paint, và Composite. • Các pixel xuất hiện trên màn hình.