React fiber là kiến trúc lõi của React (từ 16 trở đi), được viết lại để giúp React render giao diện linh hoạt, mượt mà và có thể ngắt quãng (interruptible rendering)
Các phiên bản React từ 16 trở về trước sử dụng kiến trúc gọi là “stack reconciler” hoạt động theo cơ chế đồng bộ synchronous:
- Khi React bắt đầu render, nó sẽ chạy cho đến khi xong toàn bộ.
- Nếu component tree lớn, quá trình này có thể block UI trong một lúc.
Vậy nên React Fiber ra đời để thay đổi cơ chế “reconciliation” (so sánh cây UI cũ và mới)
Mỗi Fiber node là một đơn vị công việc, tương ứng với một node trong cây component.
Cách hoạt động
Mô hình trên gọi là “Double Buffering” mô hình hai cây Fiber song song, giúp React cập nhật mà không làm giật UI.
- Current fiber tree - trạng thái UI hiện tại
- Work-in-progress (WIP) fiber tree - trạng thái đang tính toán để render mới.
Quá trình hoạt động được chia làm 2 phase.
Phase 1: Render (Reconciliation)
- React tạo/duyệt qua cây Fiber mới.
- Mỗi fiber node được xử lý từng bước nhỏ.
- React có thể tạm dừng quá trình này để nhường quyền cho các tác vụ quan trọng hơn.
Phase 2: Commit
- Khi cây fiber mới hoàn tất, React sẽ ghi thay đổi vào DOM
- Phase này là đồng bộ, không thể ngắt.