React Fiber Introduction

Introduction

React Fiber là bản tái cấu trúc thuật toán nền tảng của React đang được Facebook phát triển và sẽ được sử dụng ngay kể từ cập nhật tiếp theo của Facebook hay Instagram. Đây là kết quả của quá trình nghiên cứu suốt hơn hai năm trời của đội phát triển React.

Mục tiêu của React Fiber là tăng cường khả năng thích ứng với một số khía cạnh như hoạt ảnh (animation), bố cục (layout) hay cử chỉ (gestures). Trong buổi công bố dự án, Facebook cũng nhấn mạnh khía cạnh chủ đạo của sự thay đổi này nằm ở tính năng gia tăng và lập lịch rendering được built-in vào React Fiber đảm bảo việc render đúng đối tượng và đúng lúc. Điều này sẽ làm tăng tốc độ xử lý trên trang web.

Thế nhưng tại sao lại phải rewrite toàn bộ? "Không phải là code base của React dở nhưng chúng tôi muốn tạo ra một nền móng mới để có thể chạy được tất cả mọi thứ nhóm phát triển sẽ đưa vào trong tương lai tới đây". Điều đó cũng có nghĩa là những dòng code mới của React đều được viết hoàn toàn mới và hứa hẹn một tương lai có thể làm được nhiều thứ hơn.

Prerequisites

Một số thứ cần phải nắm rõ trước khi tìm hiểu kỹ về React Fiber:

• React Components, Elements, Instances
• Reconciliation
• React Basic Theoretical Concepts
• React design Principles

What is reconciliation?

reconciliation Thuật toán React sử dụng để phân biệt một cây với một cây khác để xác định xem phần nào cần phải thay đổi

Reconciliation là thuật toán đằng sau thứ rất phổ biến mà chúng ta biết "Virtual DOM" Nó sẽ được mô tả như sau: Khi bạn render một ứng dụng React, một cây gồm các nút mô tả ứng dụng đó sẽ được tạo ra và lưu trong bộ nhớ. Cây này sau đó được ghép lại cho phù hợp với môi trường render, Ví dụ: trong trường hợp của một ứng dụng trên trình duyệt, cây đó sẽ được dịch thành một bộ các thao tác trên DOM. Khi ứng dụng được cập nhật (thường thông qua method setState), một cây mới sẽ được tạo ra. Cây mới này sẽ được so sánh với cây cũ để tính toán những thao tác nào cần thiết để cập nhật lại ứng dụng đã render.

Mặc dù Fiber là một bản viết lại của reconcilier nhưng mô tả trong React docs phần lớn sẽ giống như cũ. Những điểm chính là: - Các loại Component khác nhau được giả định để tạo ra những cây khác nhau. React sẽ không cố gắng để thay đổi cây cũ dựa trên những điểm khác nhau với cây mới mà là thay thế hoàn toàn cây cũ. - Sự khác biệt sẽ được thực hiện bởi các khóa. Các khóa nên "ổn định, có thể đoán trước và là duy nhất".

Reconciliation vs Rendering

DOM chỉ là một trong những môi trường render để React có thể render ra, ngoài ra còn iOS và Android thông qua React Native. Lý do nó có thể hỗ trợ nhiều mục tiêu là bởi React được thiết kế sao cho Reconciliation và Rendering là các giai đoạn riêng biệt. Reconciler làm công việc tính toán những phần của cây đã thay đổi, Renderer sử dụng những thông tin đó để cập nhật ứng dụng đã render trước đó. Sự khác nhau ở đây là React DOM và React Native có thể sử dụng renderer của chúng trong khi dùng chung Reconciler được cung cấp bởi React core. Fiber tái cấu trúc lại Reconciler. Nó không liên quan mấy đến việc Render, tuy nhiên Renderer cần phải thay đổi để phù hợp với kiến trúc mới.

Scheduling

scheduling Quá trình xác định khi nào một công việc được thực hiện. Những điểm chính là: - Ở trong một giao diện người dùng, không cần thiết phải cập nhật mọi thứ ngay lập tức; trên thực tế, làm như thế có thể rất lãng phí, gây ra hiện tượng giảm khung hình (FPS), và làm ảnh hưởng đến trải nghiệm người dùng. - Những loại cập nhật khác nhau lại có sự ưu tiên khác nhau - một cập nhật Animation cần hoàn thiện nhanh hơn là một cập nhật từ dữ liệu lưu trữ. - Có 2 cách tiếp cận: một cách sẽ cần ứng dụng hay là chính bạn - lập trình viên quyết định việc lên lịch thực hiện công việc hoặc một cách sẽ để framework ở đây là React quyết định thay bạn.

React hiện tại chưa sử dụng đúng cách lập kế hoạch. Việc render lại dường như được thực hiện ngay lập tức khi có thay đổi. Tận dụng lợi ích từ việc lập kế hoạch là ý tưởng chủ đạo để tiến tới phát triển Fiber.

What is a Fiber?

Chúng ta sẽ thảo luận về cốt lõi của kiến trúc React Fiber. Fiber khá trừu tượng so với những thứ mà những nhà phát triển ứng dụng thường nghĩ đến. Nếu bạn cảm thấy thất vọng về những nỗ lực của mình để hiểu Fiber, đừng cảm thấy chán nản. Hãy tiếp tục cố gắng và cuối cùng cũng sẽ thu lại được gì đó có ý nghĩa. Chúng tôi đã xác định mục tiêu chính của Fiber là cho phép React tận dụng lợi ích từ việc lập kế hoạch (scheduling). Cụ thể chúng ta cần: - Tạm dừng công việc và quay lại thực hiện sau. - Gán ưu tiên cho những loại công việc khác nhau. - tái sử dụng lại những công việc đã hoàn thành. - bỏ qua những công việc mà không cần thiết nữa.

Để làm được những điều trên, trước tiên ta cần một cách để chia nhỏ 1 vông việc thành các đơn vị nhỏ hơn. Theo một cách nghĩa nào đó, một Fiber thể hiện một đơn vị công việc. Quay trở lại với ý tưởng trong "React Components as functions of data", thường được biểu diễn như sau v = f(d)

Render ra một ứng dụng React như một lời gọi hàm mà bên trong chứa những lời gọi đến những hàm khác, và tiếp tục như thế. Điểm tương đồng này là hữu dụng khi ta nghĩ về Fibers. Cách mà các máy tính điển hình truy vết lại một thực thi của chương trình là sử dụng Call Stack. Khi một hàm được thực thi, một Stack Frame được thêm vào hàng đợi, Stack Frame đó đại diện cho công việc được thực thi bởi hàm đó.

Khi làm việc với các giao diện người dùng, vấn đề ở đây là có quá nhiều công việc được thực thi trong cùng một lần, nó có thể khiến cho Animation bị giảm FPS và trông rất tệ. thêm vào đó, một vài công việc có thể trở nên không cần thiết nếu nó bị thay thế bởi các cập nhật gần hơn. Đây là nơi việc so sánh các thành phần UI và hàm bị phá vỡ, bởi vì thông thường các thành phần có nhiều mối liên hệ cụ thể hơn là functions.

Những browsers mới hơn (và React Native) cài đạt các API nhằm giúp chỉ ra chính xác vấn đề: requestIdleCallback lập lịch một function có độ ưu tiên thấp được gọi trong giai đoạn nhàn rỗi, và requestAnimationFrame lập lịch cho những function có độ ưu tiên cao có thể gọi trong khung hình kế tiếp. Vấn đề là, để sử dụng những API đó, bạn cần một cách để chia công việc render thành các đơn vị nhỏ. Nếu bạn chỉ phụ thuộc vào Call Stack, nó sẽ làm việc cho đến khi stack trống. Sẽ tốt hơn nếu chúng ta có thể chỉnh sửa hành vi của Call Stack để tối ưu cho việc Render ra các UI? Sễ tốt hơn nếu chúng ta có thể ngắt quãng Call Stack theo ý mình và điều khiển các Stack Frame bằng tay. Đó chính là mục tiêu của React Fiber. Fiber là một tái cấu trúc của Stack, chuyên biệt cho các components của React. Bạn có thể hiểu một Fiber như là một Stack Frame ảo. Lợi ích của việc tái cấu trúc Stack là bạn có thể lưu các Stack Frame trong bộ nhowsvaf triển khai chúng cho dù bạn không muốn. Điều này là cần thiết cho việc đạt được mục tiêu cho việc lập lịch.

Bên cạnh việc lập lịch, xử lý các Stack Frame bằng tay mở ra tiềm năng cho các tính năng như Concurrency và Error Boundaries. Chúng ta sẽ bàn những vấn đề đó ở tương lai khi React Fiber chính thức được đưa vào sử dụng.

Example

Trên đây là một số khái niệm sơ khai về những thay đổi mà React Fiber đem lại. Để dễ hình dung, bạn có thể xem một demo nho nhỏ thể hiện sự thay đổi về Animation cũng như tốc độ tải khi sử dụng Fiber so với Stack trước đây. Xem Demo tại https://claudiopro.github.io/react-fiber-vs-stack-demo/

Resources

https://github.com/acdlite/react-fiber-architecture https://github.com/claudiopro/react-fiber-vs-stack-demo