Phiên bản chính thức của React18 được phát hành và xu hương tương lai

Vào ngày 29 tháng 3 năm 2022, phiên bản chính thức của React 18 đã được phát hành. Kể từ phiên bản 16, nhóm React đã phổ cập khái niệm xử lý Concurrency (Xử lý đồng thời). Trong vòng đời phát triển của phiên bản 18 (alpha, Beta, RC), các tính năng concurrency (tính năng đồng thời) cũng đã được phổ cập, vì vậy khi phiên bản chính thức được phát hành thì không có tính năng mới.

Bài viết này tập trung vào một số xu hướng phát triển của tương lai được tiết lộ trong nhật ký phát hành phiên bản 18.


>>> Tham gia khóa học React tại NIIT - ICT Hà Nội để được hướng dẫn với lộ trình bài bản hơn.
 

Các lập trình viên có thể không quen sử dụng các tính năng concurrency

Đối với React, bạn cần rất cẩn trọng khi thêm các API. Ví dụ: Kể từ khi ra đời vào năm 2013, cách để kích hoạt các bản cập nhật là this.setState. Tuy nhiên, sau khi giới thiệu khái niệm concurrency, một số API liên quan đến nó đã được thêm vào, chẳng hạn như:

• useTransition
• useDeferredValue

Thậm chí có những API được thiết kế đặc biệt cho concurrency (nghĩa là, trong trường hợp có concurrency, việc không sử dụng các API này có thể gây ra lỗi), chẳng hạn như:

• useSyncExternalStore
• useInsertionEffect

Có rất nhiều API và nó không phải là một API bắt buộc phải sử dụng, ví dụ như useState. Hơn nữa, tính năng của concurrency có phần xa lạ với hầu hết các lập trình viên front-end.

Bạn có thể nghĩ về việc các lập trình viên khó sử dụng trực tiếp các tính năng concurrency này như thế nào.

Do đó, trong các ứng dụng tương lai được phát triển với phiên bản React18, các lập trình viên có thể không quen với các tính năng concurrency. Các tính năng này có nhiều khả năng được đóng gói bởi các thư viện khác nhau.

Ví dụ: startTransition cho phép người dùng chuyển đổi giữa các chế độ xem khác nhau mà không chặn đầu vào của người dùng. API này có thể được triển khai bởi các bộ định tuyến khác nhau và sau đó các lập trình viên có thể xem nó dưới dạng một mục cấu hình.

Mọi thứ đều là Suspense

Đối với React, có hai loại nút thắt cần được giải quyết:

• Một là sự tắc nghẽn của CPU, chẳng hạn như hoạt động của một lượng lớn phép tính khiến trang bị đóng băng.
• Hai là IO tắc nghẽn, ví dụ như phải mất thời gian chờ khi yêu cầu dữ liệu máy chủ

Sự tắc nghẽn của CPU được giải quyết bằng cơ chế ngắt ưu tiên của tính năng concurrency.

Còn Suspense giải quyết nút thắt cổ chai của IO.

Từ React.lazy gốc đến Server Components, vẫn đang được phát triển cho đến ngày nay, mọi thứ cuối cùng đều tập trung trong Suspense.

Một số logic này rất phức tạp, chẳng hạn như:

• Thành phần máy chủ
• Giải pháp kết xuất phía máy chủ mới

- Do đó, các tác vụ chức năng này dường như không được định hướng trực tiếp cho lập trình viên.

Vậy hãy quay trở lại phiên bản trước, các tác vụ chức năng này sẽ được thực hiện bởi các thư viện khác nhau. Nếu độ phức tạp cao hơn, nó sẽ được thực hiện bởi một framework dựa trên tính năng đóng gói React, chẳng hạn như Next.js và Remix.

Đó là lý do tại sao Sebastian, một nhân vật cốt lõi trong nhóm React, tham gia Next.js.

Có thể nói, định vị tương lai của React là một “hệ điều hành cơ bản front-end”, đủ phức tạp, cho nên nhìn chung, nó được các lập trình viên sử dụng một cách thận trọng.

Các lập trình viên sử dụng các ứng dụng tầng trên khác nhau dựa trên “hệ điều hành”.

Tổng kết lại:

Nếu các thư viện React Like khác nhau trước phiên bản v16 vẫn có thể chiếm một phần của miếng bánh React nhờ độ lớn và hiệu suất, thì hai thư viện này sẽ hoàn toàn là hai track trong tương lai, vì hệ sinh thái của cả hai không còn tương thích nữa.

Trong tương lai, sẽ không còn khái niệm về nhóm React family nữa và các thành phần khác nhau trong nhóm cuối cùng sẽ được giảm xuống thành một mô-đun nhỏ trong một framework lớn hơn.

Vậy hiện tại, bạn đang sử dụng React trực tiếp trong công việc của mình hay bạn đang sử dụng các framework khác nhau (chẳng hạn như Next.js)?

>>> Tham gia lập trình front end tại NIIT - ICT Hà Nội để được hướng dẫn với lộ trình bài bản hơn.

Cảm ơn bạn đã đọc, hẹn gặp bạn trong bài viết sau!