Giải mã mọi điều về thuật ngữ chế độ đồng thời trong React

Chế độ đồng thời trong React được sử dụng để làm gì?

Chế độ đồng thời của React là một tập hợp các tính năng sáng tạo được thiết kế để cải thiện việc xử lý kết xuất không đồng bộ. Những cải tiến này mang lại trải nghiệm người dùng cuối tốt hơn.

Chế độ đồng thời trong React

Một trong những vấn đề lâu năm đã đeo bám các khách hàng web từ thời xa xưa là xử lý việc hiển thị các bản cập nhật không đồng bộ. Nhóm React tiếp tục truyền thống giới thiệu các giải pháp đầy tham vọng vào khuôn khổ bằng cách thêm hỗ trợ chế độ đồng thời vào dòng phát hành React 16.x.

>>> Tham khảo: Khóa học lập trình React

Cách bật chế độ đồng thời trong React

Chế độ đồng thời có sẵn trong React tuy nhiên bạn cần kích hoạt nó bằng cách sử dụng lệnh như sau:

npm install react@experimental react-dom@experimental

Chế độ đồng thời là một thay đổi tương đối có ảnh hưởng với cách hoạt động của React và yêu cầu root level node phải được chuyển qua công cụ đồng thời. Điều này được thực hiện bằng cách gọi createRoot trên thư mục gốc của ứng dụng, thay vì chỉ reactDOM.render()như dưới đây:

ReactDOM.createRoot(

  document.getElementById('root')

).render(<App />);

Lưu ý rằng createRootchỉ khả dụng nếu bạn đã cài đặt gói thử nghiệm. Và bởi vì nó là một thay đổi cơ bản, các cơ sở mã và thư viện hiện có có thể không tương thích với nó. Đặc biệt là phương pháp vòng đời mà bây giờ được thêm vào phía trước với UNSAFE_là không tương thích.

Sách hướng dẫn được đề xuất

Vì thực tế này, React giới thiệu một bước trung gian giữa công cụ kết xuất kiểu cũ mà chúng ta sử dụng ngày nay và chế độ đồng thời. Bước này được gọi là "chế độ chặn" và nó tương thích ngược hơn, nhưng với ít tính năng đồng thời hơn.

Về lâu dài, chế độ đồng thời sẽ trở thành chế độ mặc định. Về trung hạn, React sẽ hỗ trợ ba chế độ như sau :

1. Chế độ Legacy: ReactDOM.render(<App />, rootNode) . Chế độ kế thừa hiện có.
2. Chế độ chặn: ReactDOM.createBlockingRoot(rootNode).render(<App />) . Ít thay đổi đột phá hơn, ít tính năng hơn.
3. Chế độ đồng thời: ReactDOM.createRoot(rootNode).render(<App />) . Chế độ hoàn toàn đồng thời với nhiều thay đổi đột phá.

Một mô hình kết xuất mới trong React

Chế độ đồng thời trong React về cơ bản thay đổi cách React hiển thị giao diện để cho phép giao diện được hiển thị trong khi đang tiến hành tìm nạp dữ liệu. Điều này có nghĩa là React phải biết điều gì đó về các thành phần của bạn. Cụ thể, React bây giờ phải biết về trạng thái tìm nạp dữ liệu của các thành phần của bạn.

>>> Đọc thêm: VueJS và ReactJs trong năm 2021 - Đâu là Framework nên dùng?

Thành phần Suspect mới của chế độ đồng thời trong React

Điểm nổi bật nhất về chế độ đồng thời trong React là thành phần Suspect.  Bạn sử dụng thành phần này để thông báo cho React rằng một khu vực nhất định của giao diện người dùng phụ thuộc vào việc tải dữ liệu không đồng bộ và cung cấp cho nó trạng thái tải như vậy.

Khả năng này hoạt động ở cấp framework và có nghĩa là thư viện tìm nạp dữ liệu của bạn phải cảnh báo React về trạng thái của nó bằng cách triển khai API Suspense. Hiện tại Relay thực hiện điều này cho GraphQL và  dự án tìm nạp react-suspense-fetch đang giải quyết việc tìm nạp dữ liệu REST.

Có thể hiểu ngắn gọn là giờ đây bạn được yêu cầu sử dụng một thư viện tìm nạp dữ liệu thông minh hơn có khả năng cho React biết trạng thái của nó. Do đó cho phép React tối ưu hóa cách giao diện người dùng của bạn hiển thị.

Tính đồng thời trong tìm nạp dữ liệu React

Một lợi ích quan trọng của thiết lập này được lặp đi lặp lại là tất cả việc tìm nạp dữ liệu sẽ diễn ra đồng thời. Vì vậy, giao diện người dùng của bạn được hưởng lợi từ cả vòng đời hiển thị được cải thiện và một cách đơn giản và tự động để đạt được tính năng tìm nạp dữ liệu song song cho nhiều thành phần.

Công dụng của React

Công cụ chính tiếp theo chế độ đồng thời Reatc  là useTransition hook. Đây là một công cụ chi tiết hơn cho phép bạn điều chỉnh cách chuyển đổi giao diện người dùng xảy ra. 

Ví dụ:

function App () { const [ resource , setResource ] = useState ( initialResource ); const [ startTransition , isPending ] = useTransition ({ timeoutMs : 3000 }); return ( <> < button      onClick = {() => {          startTransition (() => { const nextUserId = getNextId ( resource

           . userId );

           setResource ( fetchProfileData ( nextUserId )); }); }}> Tiếp theo </ button > { isPending ? "Loading ..." : null } < ProfilePage resource = { resource } /> </> ); }

Kết luận: Chế độ đồng thời trong React đem lại nhiều lợi ích cho lập trình viên trong việc tìm nạp dữ liệu. Đây sẽ là một công cụ hữu ích để tinh giản quá trình làm việc với các dự án lớn. Tìm hiểu thêm về lập trình với React và các ngôn ngữ lập trình khác qua các khóa học lập trình tại  Viện công nghệ thông tin T3H bạn nhé!