5 phút về Fiber trong React Theo Phong Cách truyện tranh

Khi React nhận ra Call Stack của JS khá phế và quyết định tự xây cái riêng

Anh em hay nghe người ta nói đi nói lại mấy câu kiểu: Fiber là thuật toán diffing mới, Fiber giúp render đồng thời, hay đơn giản là nó nhanh hơn

Nhưng thú thật, nếu anh em đào sâu vào nó, cảm giác nó không giống JavaScript chút nào. Nó giống một loại công nghệ khá lạ đang sống trong trình duyệt thì đúng hơn

Nếu thấy hay thì cho mình xin một bookmark ở phía bên trái để bài viết đến được nhiều người hơn nha

Chúng mình có tạo Group cho các bạn cùng chia sẻ và học hỏi về Frontend nâng cao, các câu phỏng vấn khó nha 😄😄😄

Các bạn tham gia để gây dựng cộng đồng Frontend Việt Nam thật lớn mạnh nhé 😍😍😍

Cộng Đồng Frontend Nâng Cao Việt Nam: https://www.facebook.com/groups/seniorfrontendvietnam

Kênh TikTok: https://www.tiktok.com/@sydexa.com

Kênh youtube: https://www.youtube.com/@sydexa.official

Nếu thấy hay thì cho mình xin một bookmark ở phía bên trái để bài viết đến được nhiều người hơn nha

1. React cũ (Stack Reconciler) hoạt động như một đứa trẻ ngây thơ leo thang bộ. Nó dùng đệ quy để duyệt cây component.

Vấn đề là cái thang này bị hàn chết vào Call Stack của JS engine. Một khi React bắt đầu leo xuống (bắt đầu render), nó không thể dừng lại, không thể quay đầu, không thể nghỉ giải lao. Nếu anh em có 50k nodes? React sẽ chặn họng hoàn toàn Main Thread

Browser: "Ê bro, user đang gõ phím, cho tao repaint cái!"

React cũ: "Im đi, tao đang render dở component thứ 49.000, không dừng được đâu."

-> Kết quả là lag, giật, input bị delay. Đó là nguyên tắc chung, không tối ưu nhỏ lẻ nào cứu được.

Chừng nào còn dựa vào JS Call Stack, chừng đó React không bao giờ có thể ngắt quãng việc render.

2. Fiber: Cú lật kèo với JS Engine

Khoảng 2016, React team nhận ra: "Chừng nào còn dựa vào Stack của JS, chừng đó mình còn chết".

Vậy họ làm gì?

Họ tự viết lại một Call Stack giả. Đó chính là Fiber. Nó không phải thuật toán gì cao siêu mà nó là** một cấu trúc dữ liệu Linked List**.

React biến mỗi component thành một Fiber Node - giống như một memory cell hay một OS Task nhỏ. Vì là Linked List, React nắm quyền kiểm soát hoàn toàn:

Thay vì đâm đầu chạy một mạch đến hết, giờ đây React render theo vòng lặp:

1. Làm xong một Fiber node (một unit of work).

2. Hỏi trình duyệt: "Ê, có việc gì gấp không (user input, animation)?"

3. Nếu có: Tạm dừng, trả lại Main Thread cho browser xử lý

4. Nếu không: Tiếp tục làm Fiber node tiếp theo.

React thoát khỏi kiếp nô lệ của Call Stack trình duyệt để trở thành một "Hệ điều hành" mini tự quản lý bộ nhớ và tác vụ của nó

Đang render dở? -> Pause lại.

User gõ phím? -> Ưu tiên xử lý trước.

Xong việc gấp? -> Quay lại render tiếp đúng chỗ vừa bỏ dở

Qúa ngon!!!

3. Chế độ giả lập (Simulation Mode)

Cái hay nhất mà ít người để ý: Nhờ kiến trúc Fiber (cây đôi - double tree), React có thể chạy render phase như một chế độ giả lập. Khi React đang render, nó không hề chạm vào DOM. Nó đang âm thầm xây dựng một bản nháp (WIP tree) trong bộ nhớ, tính toán, thử nghiệm, vứt bỏ, làm lại... giống hệt cách Game Engine vẽ khung hình vào bộ nhớ đệm trước.

React duy trì cùng lúc 2 cây:

1. Current Tree: Cái đang hiển thị trên màn hình.
2. Work-in-Progress (WIP) Tree: Cái nháp đang được tính toán trong bộ nhớ.

Chỉ khi nào bản nháp hoàn hảo, nhất quán, không lỗi lầm, React mới nhảy qua dùng cây mới đã vẽ xong (Commit phase) để ụp cái UI mới lên màn hình

Đó là lý do tại sao UI không bao giờ bị tình trạng hiển thị nửa vời (half-broken state). Và đó cũng là nền tảng để những thứ điên rồ như Suspense, Transitions, hay Server Components có thể hoạt động mượt mà như bây giờ

Nếu thấy hay thì cho mình xin một bookmark ở phía bên trái để bài viết đến được nhiều người hơn nha

Chúng mình có tạo Group cho các bạn cùng chia sẻ và học hỏi về Frontend nâng cao, các câu phỏng vấn khó nha 😄😄😄

Các bạn tham gia để gây dựng cộng đồng Frontend Việt Nam thật lớn mạnh nhé 😍😍😍

Cộng Đồng Frontend Nâng Cao Việt Nam: https://www.facebook.com/groups/seniorfrontendvietnam

Kênh TikTok: https://www.tiktok.com/@sydexa.com

Kênh youtube: https://www.youtube.com/@sydexa.official

Nếu thấy hay thì cho mình xin một bookmark ở phía bên trái để bài viết đến được nhiều người hơn nha

Túm cái quần lại:

React Fiber không chỉ là code nhanh hơn. Đó là việc React nói Không với giới hạn của JS Engine và tự build luật chơi riêng.

Hãy nhớ rằng bên dưới đó là một "Hệ điều hành thu nhỏ" đang điều phối từng mili-giây một để nhường tài nguyên cho trình duyệt

Anh em nghĩ sao về hướng tiếp cận này của React team? Cùng comment bên dưới nhé!