Giải thích về Scheduler và Kiến trúc Fiber trong React

Giới thiệu về Scheduler và Kiến trúc Fiber trong React

Trong React, Scheduler hoạt động như một quản lý dự án siêu hiệu quả cho các cập nhật giao diện người dùng (UI). Nó quyết định công việc nào được thực hiện, khi nào và theo thứ tự nào, đảm bảo các ứng dụng mượt mà và phản hồi nhanh chóng. Bài viết này sẽ giải thích về Scheduler của React, Fiber và quá trình hòa giải (reconciliation) một cách dễ hiểu.

React cũng giới thiệu các tính năng hiện đại như:

⏳ Phân chia thời gian (Time Slicing): Chia công việc thành từng lô để giữ cho UI phản hồi mượt mà.
⚡ Render đồng thời (Concurrent Rendering): Render nhiều phần của UI song song mà không gây tắc nghẽn luồng chính.
🧩 Render gia tăng (Incremental Rendering): Cập nhật dần dần UI theo từng phần, cho phép các cập nhật khẩn cấp được ưu tiên.

Scheduler là động cơ giúp những điều này trở nên khả thi bằng cách quản lý các ưu tiên công việc, cho phép và tiếp tục các tác vụ một cách thông minh.

🔹 1. Kích hoạt một cập nhật

Câu chuyện: Bạn đã nhập vào một ô input hoặc nhấn một nút.

React nhận được một cập nhật trạng thái (setState hoặc dispatch).
Một đối tượng Fiber được tạo ra cho mỗi thành phần có thể thay đổi. Hãy nghĩ về Fibers như những đơn vị công việc nhỏ.
Mỗi Fiber chứa:
- Loại thành phần
- Props và trạng thái
- Mối quan hệ cha & con và anh & em
- Hàng đợi cập nhật

🔹 2. Lập lịch: Ưu tiên công việc ⏱️

Công việc ưu tiên cao: đầu vào của người dùng, hoạt ảnh.
Công việc ưu tiên thấp: phản hồi mạng, tác vụ nền.
React có thể tạm dừng công việc ưu tiên thấp để xử lý các cập nhật khẩn cấp trước.
Sử dụng các API của trình duyệt như requestIdleCallback để nhường quyền kiểm soát và tránh làm đông UI.
⏳ Phân chia thời gian: chia nhỏ các cập nhật lớn thành các lô nhỏ hơn, cho phép React nhường chỗ giữa chúng.
⚡ Render đồng thời: cho phép nhiều cập nhật được xử lý mà không chặn việc render.
🧩 Render gia tăng: đảm bảo chỉ các cập nhật cần thiết được cam kết trong khi các cập nhật khác chờ đợi lượt của chúng.

🔹 3. Cây Fiber: Bản thiết kế 🌳

Mỗi thành phần = nút Fiber
Mỗi Fiber có các con trỏ: child, sibling, return (cha)
Trạng thái (memoizedState), props đang chờ, hàng đợi cập nhật.
Scheduler đi qua cây này để quyết định Fiber nào nên được cập nhật trước.

🔹 4. Vòng lặp công việc: Scheduler hoạt động 🔄

Chọn một Fiber từ hàng đợi cập nhật.
Thực hiện công việc render:

Tính toán DOM ảo.
Hoà giải các phần tử con (so sánh cũ và mới).
1. Nếu hết thời gian, tạm dừng công việc và lưu lại các tác vụ còn lại (nhường chỗ).

React đảm bảo luồng chính luôn tự do và UI luôn phản hồi.

🔹 5. Hòa giải: So sánh các Fiber 🔍

So sánh cây Fiber cũ và mới.
Fiber không thay đổi → bỏ qua cập nhật.
Fiber đã cập nhật → đánh dấu để cam kết.
Fiber mới → đánh dấu để đặt vào.
Fiber bị xóa → đánh dấu để xóa.

Chỉ những Fiber đã thay đổi mới cập nhật DOM, giảm thiểu các phép toán tốn kém.

🔹 6. Giai đoạn cam kết: Áp dụng thay đổi ✅

Giai đoạn cam kết là đồng bộ và diễn ra trong các tiểu giai đoạn:

Giai đoạn trước khi thay đổi:

getSnapshotBeforeUpdate chạy cho các thành phần lớp.
Cho phép đọc thông tin bố cục trước khi thay đổi DOM.
1. Giai đoạn thay đổi:
Cập nhật các nút DOM.
Áp dụng các thay đổi đã tính toán trong giai đoạn render.
1. Giai đoạn hiệu ứng bố cục:
Các hook useLayoutEffect chạy sau khi cập nhật DOM nhưng trước khi trình duyệt vẽ.
Hữu ích cho việc đọc bố cục và thực hiện các điều chỉnh hình ảnh đồng bộ.
1. Giai đoạn hiệu ứng thụ động:
Các hook useEffect chạy sau khi vẽ một cách không đồng bộ.

Hãy nghĩ về điều này như là React gửi các hướng dẫn tới đội xây dựng theo các bước có thứ tự.

🔹 7. Tạm dừng, Tiếp tục và Quản lý WIP ⏸️▶️

React có thể tạm dừng, tiếp tục, loại bỏ hoặc tái tạo công việc đang tiến hành (WIP) Fibers tùy thuộc vào ưu tiên và điều kiện runtime:

Tạm dừng: Luồng chính bận hoặc có các cập nhật ưu tiên cao hơn đến → WIP hiện tại tạm dừng và được lưu trong cây workInProgress.
Tiếp tục: Trong khoảng thời gian nhàn rỗi tiếp theo, scheduler tiếp tục công việc bị tạm dừng.
Loại bỏ: WIP lỗi thời bị loại bỏ để tiết kiệm tính toán.
Tái tạo: Thay đổi đáng kể trong props/trạng thái có thể kích hoạt việc tái tạo công việc Fiber.
Quản lý nhiều WIP: Một Fiber có thể có nhiều WIP cho các lane khác nhau; scheduler thực hiện WIP có ưu tiên cao nhất trước.

⏳⚡🧩 Phân chia thời gian, render đồng thời và render gia tăng được thực hiện thông qua hệ thống quản lý WIP này.

🔹 8. Các Lanes Ưu Tiên 🏎️

Lane đồng bộ: cập nhật khẩn cấp (gõ, nhấp chuột).
Lane đầu vào liên tục: cuộn, di chuyển con trỏ.
Lane mặc định: cập nhật bình thường.
Lane nhàn rỗi: tác vụ nền.

Scheduler thực hiện các cập nhật dựa trên ưu tiên lane, quyết định WIP nào sẽ được xử lý hoặc tạm dừng.

🔹 9. Tương tác giữa Hooks và Scheduler 🪝

Cập nhật useState/useReducer đi vào updateQueue của Fiber.
Scheduler quyết định khi nào xử lý hàng đợi.
useLayoutEffect chạy trong giai đoạn bố cục trước khi vẽ.
useEffect chạy trong giai đoạn thụ động sau khi vẽ.
getSnapshotBeforeUpdate cung cấp snapshot của DOM trước khi thay đổi cho các thành phần lớp.

🔑 Những điểm chính

React chia công việc thành Fibers để cập nhật chi tiết.
Scheduler ưu tiên và nhường chỗ công việc cho UI mượt mà.
Giai đoạn render là có thể bị gián đoạn, giai đoạn cam kết là đồng bộ.
Chỉ những Fiber đã thay đổi mới được cam kết vào DOM.
Scheduler có thể tạm dừng, tiếp tục, loại bỏ hoặc tái tạo WIP Fibers.
Hooks tích hợp mượt mà vào hệ thống này.
useLayoutEffect và getSnapshotBeforeUpdate cho phép kiểm soát chính xác về bố cục trước khi vẽ.
⏳⚡🧩 Phân chia thời gian, render đồng thời và render gia tăng giúp ứng dụng luôn phản hồi ngay cả khi có các cập nhật phức tạp.

🌟 Tóm tắt quy trình câu chuyện

Người dùng kích hoạt cập nhật → Fibers được tạo ra.
Scheduler quyết định ưu tiên → Giai đoạn render tính toán DOM ảo.
Hòa giải phát hiện thay đổi → Giai đoạn cam kết áp dụng các cập nhật với các hook bố cục/thụ động.
WIP Fibers có thể tạm dừng, tiếp tục hoặc bị loại bỏ → UI giữ được sự phản hồi.

React là một quản lý thông minh, đa nhiệm hiệu quả để giữ cho ứng dụng của bạn mượt mà.

Câu hỏi thường gặp (FAQ)

1. Scheduler trong React là gì?

Scheduler trong React là một hệ thống quản lý công việc giúp xác định thứ tự và thời điểm thực hiện các cập nhật giao diện người dùng.

2. Fiber là gì trong React?

Fiber là một cấu trúc dữ liệu đại diện cho một phần của giao diện người dùng, cho phép React quản lý các cập nhật một cách linh hoạt và hiệu quả.

3. Làm thế nào để tối ưu hóa hiệu suất của ứng dụng React?

Sử dụng các phương pháp như phân chia thời gian, render đồng thời và quản lý WIP để đảm bảo UI luôn phản hồi tốt trong các tình huống khác nhau.

4. Điều gì xảy ra khi một cập nhật bị tạm dừng trong React?

Khi một cập nhật bị tạm dừng, React sẽ lưu trữ WIP hiện tại và tiếp tục xử lý các cập nhật có ưu tiên cao hơn trong thời gian nhàn rỗi.

5. Các hook trong React có ảnh hưởng đến Scheduler không?

Có, các hook như useState, useEffect, và useLayoutEffect tương tác trực tiếp với Scheduler để xác định thời điểm và cách thức cập nhật giao diện người dùng.