[Advanced React] React Fiber là gì? Hiểu rõ kiến trúc và cách hoạt động của nó

Trong thế giới phát triển web sôi động, React đã trở thành một thế lực không thể phủ nhận, giúp các lập trình viên xây dựng giao diện người dùng (UI) phức tạp một cách hiệu quả. Nhưng đằng sau sự đơn giản của các component và hook, có một cỗ máy mạnh mẽ, một trái tim "kỹ thuật số" đang đập không ngừng để đảm bảo mọi thứ mượt mà, nhanh nhạy và đáp ứng. Cỗ máy đó chính là React Fiber.

Nếu bạn từng thắc mắc tại sao các ứng dụng React hiện đại có thể xử lý các hoạt ảnh phức tạp, nạp dữ liệu bất đồng bộ và phản hồi tức thì với thao tác người dùng mà không bị "khựng", thì câu trả lời nằm ở kiến trúc đột phá này. Hãy cùng nhau thực hiện một cuộc hành trình sâu vào bên trong React, giải mã kiến trúc Fiber và khám phá lý do tại sao nó lại là một cuộc cách mạng thực sự.

Vấn đề của quá khứ: Reconciler dựa trên Stack

Trước khi có Fiber, React sử dụng một thuật toán gọi là "Stack Reconciler". Hãy tưởng tượng nó như một người đầu bếp chỉ có thể làm một việc duy nhất tại một thời điểm. Khi nhận được yêu cầu cập nhật UI (ví dụ: người dùng nhấp vào nút), Reconciler cũ sẽ bắt đầu quá trình reconciliation - so sánh cây Virtual DOM mới với cây cũ để tìm ra những thay đổi cần được áp dụng lên DOM thật.

Vấn đề lớn nhất của phương pháp này là nó đồng bộ và không thể gián đoạn. Một khi quá trình reconciliation bắt đầu, nó phải chạy cho đến khi hoàn tất. Nếu cây component của bạn lớn và phức tạp, quá trình này có thể mất hàng chục, thậm chí hàng trăm mili giây. Trong khoảng thời gian đó, luồng chính (main thread) của trình duyệt sẽ bị chặn hoàn toàn.

Hậu quả là gì?

• Giao diện bị "đóng băng": Người dùng không thể tương tác, các ô input không phản hồi, và tệ nhất là các hoạt ảnh (animation) sẽ bị giật, lag, tạo ra một trải nghiệm người dùng cực kỳ tồi tệ.
• Lãng phí tài nguyên: Không có cách nào để ưu tiên các tác vụ quan trọng. Một cập nhật nhỏ từ cú nhấp chuột của người dùng có thể phải "xếp hàng" chờ một tác vụ render lớn không khẩn cấp hoàn thành.

React cần một trái tim mới - một trái tim có thể đập theo nhịp điệu của người dùng, có thể tạm dừng để xử lý những việc khẩn cấp và tiếp tục công việc đang dang dở sau đó. Và React Fiber đã ra đời để giải quyết bài toán đó.

React Fiber là gì? một cuộc cách mạng về Reconciliation

Về cốt lõi, React Fiber là một bản cài đặt lại hoàn toàn thuật toán reconciliation cốt lõi của React. Nó không phải là một tính năng bạn import vào code, mà là một kiến trúc nền tảng, một sự thay đổi cơ bản trong cách React suy nghĩ và hoạt động.

Mục tiêu chính của Fiber là cho phép React có khả năng ngừng, hủy bỏ, hoặc bắt đầu lại công việc render một cách linh hoạt. Thay vì coi việc cập nhật UI là một khối công việc nguyên tử, không thể chia cắt, Fiber chia nhỏ nó thành các "đơn vị công việc" (units of work) nhỏ hơn. Luồng chính có thể xử lý một vài đơn vị này, sau đó tạm dừng để kiểm tra xem có việc gì khác quan trọng hơn không (như một sự kiện input từ người dùng), xử lý nó, rồi quay lại tiếp tục công việc còn dang dở.

Khả năng này được gọi là render bất đồng bộ (asynchronous rendering) hay render đồng thời (concurrent rendering).

Trái tim của Fiber: Cấu trúc dữ liệu "Fiber"

Để thực hiện được điều kỳ diệu này, React giới thiệu một cấu trúc dữ liệu mới gọi là fiber node. Mỗi fiber node là một đối tượng JavaScript chứa thông tin về một component, một phần tử DOM, hoặc một mảnh của UI. Nó không chỉ đơn giản là một bản sao của component trong cây Virtual DOM, mà còn là một đơn vị công việc.

Một fiber node chứa các thông tin quan trọng như:

• type và key: Giống như trong các phần tử React bạn vẫn viết.
• child và sibling: Con trỏ đến fiber node con đầu tiên và fiber node anh em kế tiếp, tạo thành một danh sách liên kết (linked list).
• return: Con trỏ trỏ ngược về fiber node cha.
• pendingProps và memoizedProps: Props mới và props đã được sử dụng trong lần render trước.
• stateNode: Con trỏ đến thực thể của component class, hoặc phần tử DOM.

Bằng cách sử dụng các con trỏ child, sibling, và return, React đã biến cây component phân cấp thành một danh sách liên kết phẳng. Điều này cho phép React duyệt qua cây và xử lý từng node (từng đơn vị công việc) một cách độc lập mà không cần đệ quy sâu như Reconciler cũ.

Cơ chế hoạt động: Hai cây, hai giai đoạn

React Fiber hoạt động dựa trên một cơ chế thông minh sử dụng hai cây và một quy trình render gồm hai giai đoạn chính.

1. Cây current và workInProgress

Tại bất kỳ thời điểm nào, React duy trì hai cây fiber:

• Cây current: Đây là cây đại diện cho trạng thái UI hiện tại đang được hiển thị trên màn hình. Nó là nguồn chân lý (source of truth).
• Cây workInProgress: Khi có một yêu cầu cập nhật, React không thay đổi trực tiếp cây current. Thay vào đó, nó tạo một bản sao của cây current gọi là cây workInProgress. Tất cả các công việc tính toán, so sánh và xử lý thay đổi sẽ diễn ra trên cây này.

Việc làm việc trên một cây "nháp" (workInProgress) đảm bảo rằng cây current và UI thực tế không bị ảnh hưởng bởi quá trình render đang diễn ra, dù nó có bị tạm dừng hay gián đoạn.

2. Hai giai đoạn của quá trình Render

Quá trình cập nhật UI được chia thành hai giai đoạn rõ rệt:

Giai đoạn 1: Render/Reconciliation (Bất đồng bộ & Có thể gián đoạn)

Đây là giai đoạn mà React xây dựng cây workInProgress. Nó bắt đầu từ gốc, duyệt qua từng fiber node và thực hiện các công việc sau:

• Gọi render() cho class component hoặc thực thi function component.
• So sánh kết quả trả về với fiber node con cũ.
• Xác định những thay đổi cần thiết (thêm, sửa, xóa).

Giai đoạn này hoàn toàn an toàn để tạm dừng. Vì tất cả chỉ là tính toán trong bộ nhớ và chưa hề thay đổi DOM thật, việc dừng lại giữa chừng và quay lại sau không gây ra bất kỳ hiệu ứng phụ nào trên giao diện người dùng. React có thể chạy giai đoạn này theo từng mảnh nhỏ, và sau mỗi mảnh, nó sẽ nhường lại quyền kiểm soát cho trình duyệt để xử lý các sự kiện có độ ưu tiên cao hơn.

Giai đoạn 2: Commit (Đồng bộ & Không thể gián đoạn)

Khi toàn bộ cây workInProgress đã được xây dựng xong và sẵn sàng, React sẽ bước vào giai đoạn Commit. Ở giai đoạn này, React sẽ:

• Duyệt qua cây workInProgress đã hoàn thiện và áp dụng tất cả các thay đổi đã được tính toán lên DOM thật trong một lần duy nhất.
• Chạy các lifecycle methods như componentDidMount, componentDidUpdate và các hook như useEffect, useLayoutEffect.

Giai đoạn này phải diễn ra đồng bộ và không được phép gián đoạn. Điều này là để đảm bảo tính nhất quán của DOM, tránh tình trạng UI hiển thị một trạng thái nửa vời, không hoàn chỉnh.

Sau khi giai đoạn Commit hoàn tất, cây workInProgress sẽ trở thành cây current mới, và chu trình lại sẵn sàng cho lần cập nhật tiếp theo.

Lợi ích vượt trội: Không chỉ là hiệu năng

Kiến trúc Fiber không chỉ là một cải tiến về hiệu năng, nó còn mở ra một kỷ nguyên mới cho các tính năng mạnh mẽ trong React:

• Trải nghiệm người dùng mượt mà: Bằng cách ưu tiên các tác vụ quan trọng (như input của người dùng) và chia nhỏ các tác vụ render lớn, Fiber loại bỏ gần như hoàn toàn hiện tượng giật, lag, ngay cả trong các ứng dụng phức tạp nhất.
• Concurrency (Đồng thời): Đây là khả năng cốt lõi. React có thể làm việc trên nhiều bản cập nhật trạng thái cùng một lúc với các mức độ ưu tiên khác nhau.
• React Suspense: Tính năng cho phép các component "chờ" một tác vụ bất đồng bộ nào đó (như tải dữ liệu hoặc code) hoàn thành trước khi render, đồng thời hiển thị một UI dự phòng (fallback). Điều này không thể thực hiện được nếu không có khả năng tạm dừng render của Fiber.
• useTransition và useDeferredValue: Các hook này cho phép lập trình viên đánh dấu các bản cập nhật trạng thái là "không khẩn cấp", giúp React có thể trì hoãn việc render chúng để ưu tiên cho các tương tác quan trọng hơn.

Điều này có ý nghĩa gì với Lập trình viên?

Đối với hầu hết các lập trình viên React, Fiber hoạt động một cách thầm lặng phía sau hậu trường. Bạn không cần phải thay đổi cách viết component hay quản lý state hàng ngày.

Tuy nhiên, việc hiểu về Fiber sẽ giúp bạn:

1. Viết code tối ưu hơn: Bạn sẽ hiểu tại sao việc giữ cho các tác vụ render ngắn gọn lại quan trọng và biết cách sử dụng các công cụ mới như useTransition để cải thiện khả năng phản hồi của ứng dụng.
2. Gỡ lỗi hiệu quả hơn: Khi gặp các vấn đề về hiệu năng, bạn sẽ có kiến thức nền tảng để hiểu những gì đang xảy ra bên dưới và sử dụng các công cụ như React Profiler một cách hiệu quả hơn.
3. Tận dụng các tính năng hiện đại: Bạn sẽ nắm bắt được bản chất của Suspense, Concurrent Mode và các tính năng tương lai khác của React, vì chúng đều được xây dựng trên nền tảng của Fiber.

Kết luận: React Fiber là một sự tái cấu trúc toàn diện

React Fiber không chỉ là một bản cập nhật. Nó là một sự tái cấu trúc toàn diện, một bộ não và trái tim mới cho phép React đáp ứng được những thách thức của các ứng dụng web hiện đại.

Bằng cách chia nhỏ công việc, thiết lập ưu tiên và hoạt động bất đồng bộ, Fiber đã biến React từ một thư viện chỉ biết "làm việc chăm chỉ" thành một thư viện biết "làm việc thông minh". Nó đảm bảo rằng, dù ứng dụng của bạn có phức tạp đến đâu, trải nghiệm của người dùng cuối cùng vẫn luôn là ưu tiên hàng đầu - nhanh, mượt mà và không bao giờ bị gián đoạn.