- React Native phiên bản 0.76 đã được phát hành trên npm. Phiên bản này mặc định bao gồm kiến trúc mới và hỗ trợ đầy đủ các tính năng React hiện đại.
- Kiến trúc mới hỗ trợ các tính năng như Suspense, Transitions, automatic batching,
useLayoutEffect, đồng thời giới thiệu lại hệ thống native module và component để có thể viết mã an toàn kiểu dữ liệu hơn.
- Đây là thành quả của quá trình viết lại React Native từ nền tảng bắt đầu từ năm 2018, và được thiết kế để phần lớn ứng dụng có thể chuyển đổi dần sang kiến trúc mới.
- React Native 0.76 có thể được phần lớn ứng dụng áp dụng với mức công sức tương đương các bản phát hành trước, và các thư viện phổ biến đã hỗ trợ kiến trúc mới.
Kiến trúc mới là gì?
- Kiến trúc mới là kết quả của việc viết lại hoàn toàn các hệ thống cốt lõi của React Native, bao gồm cách render component, cách giao tiếp giữa JavaScript và lớp trừu tượng native, cũng như cách lập lịch công việc giữa các luồng.
- Kiến trúc trước đây giao tiếp với nền tảng native thông qua async bridge, còn kiến trúc mới được thiết kế để hỗ trợ cả cập nhật đồng bộ lẫn bất đồng bộ.
- Kiến trúc mới gồm bốn phần chính: hệ thống native module mới, renderer mới, event loop và việc loại bỏ bridge.
Native module mới
- Được viết bằng C++ để cung cấp các khả năng mới
- Có thể giao tiếp đồng bộ với runtime native
- Cung cấp tính an toàn kiểu dữ liệu giữa JavaScript và mã native
- Có thể chia sẻ mã giữa các nền tảng
- Mặc định hỗ trợ lazy module loading
- Có thể tận dụng toàn bộ khả năng của phần triển khai native C++ từ API JavaScript/TypeScript
- Có thể định nghĩa hợp đồng kiểu mạnh bằng Codegen
- Module chỉ được nạp vào bộ nhớ khi cần, giúp rút ngắn thời gian khởi động ứng dụng
Renderer mới
- Được viết lại bằng C++ và mang lại các lợi ích sau:
- Có thể render cập nhật trên các luồng khác nhau với mức ưu tiên khác nhau
- Có thể đọc layout đồng bộ từ các luồng khác nhau
- Mã C++ được chia sẻ trên mọi nền tảng
- Giờ đây cây view được lưu dưới dạng cấu trúc cây bất biến
- Có thể xử lý cập nhật an toàn giữa các luồng
- Có thể xử lý nhiều cây đang được tiến hành, đại diện cho các phiên bản khác nhau của giao diện người dùng
- Có thể tạm dừng cập nhật ưu tiên thấp, render các tác vụ khẩn cấp như thao tác người dùng, rồi tiếp tục phần cập nhật ưu tiên thấp
Event loop
- Kiến trúc mới triển khai mô hình xử lý event loop rõ ràng, giúp thu hẹp khác biệt giữa React DOM và React Native.
- Triển khai mô hình xử lý event loop được xác định rõ để xử lý công việc trên luồng JavaScript
- Event loop sắp xếp cập nhật và sự kiện theo cách có thể dự đoán, cho phép ngắt các cập nhật ưu tiên thấp bằng các sự kiện người dùng khẩn cấp.
- Phù hợp hơn với đặc tả web
- Sẽ là nền tảng cho nhiều tính năng trình duyệt hơn trong tương lai
Loại bỏ bridge
- Kiến trúc mới loại bỏ bridge, cho phép giao tiếp trực tiếp và hiệu quả giữa JavaScript và mã native.
- Việc loại bỏ bridge giúp cải thiện thời gian khởi động, giảm crash do hành vi không xác định, đồng thời giúp báo cáo lỗi và debug dễ dàng hơn.
Tính năng mới
- Transitions
- Transitions, khái niệm mới của React 18, phân biệt giữa cập nhật khẩn cấp và cập nhật không khẩn cấp.
- Cập nhật khẩn cấp cần phản hồi ngay lập tức, còn cập nhật Transitions chuyển UI từ view này sang view khác.
- Automatic batching gom nhiều cập nhật trạng thái lại với nhau hơn để tránh render các trạng thái trung gian, giúp React Native chạy nhanh hơn và ít độ trễ hơn.
- Kiến trúc mới hỗ trợ đọc thông tin layout đồng bộ thông qua
useLayoutEffect và cập nhật UI ngay trong cùng một frame.
- Kiến trúc mới hỗ trợ đầy đủ Suspense được giới thiệu trong React 18, giúp xử lý trạng thái loading và ưu tiên cao cho đầu vào của người dùng.
Cách nâng cấp
- Khi nâng cấp lên 0.76, phần lớn ứng dụng có thể thực hiện với mức công sức tương đương các bản phát hành khác nhờ lớp tương thích interop
- Tuy nhiên, để tận dụng hoàn toàn New Architecture và các tính năng concurrent, cần migrate custom native module và component
- Đối với nhà phát triển ứng dụng
- Cần nâng cấp thư viện, custom native component và custom native module để hỗ trợ đầy đủ New Architecture
- Đã có sự phối hợp để phần lớn các thư viện React Native phổ biến hỗ trợ New Architecture
- Đối với người quản lý thư viện, khuyến nghị migrate thư viện sang API native module và component mới
Tổng kết của GN⁺
- Việc chuyển sang New Architecture có vẻ sẽ là một cột mốc quan trọng đối với phát triển React Native. Khi cả cập nhật đồng bộ và bất đồng bộ đều khả thi, nút thắt bridge được giải quyết, và có thể đọc layout từ luồng khác, nhiều cải thiện về hiệu năng và trải nghiệm người dùng được kỳ vọng
- Đặc biệt, việc hỗ trợ đầy đủ các tính năng Concurrent của React 18 cũng là điểm rất đáng chú ý. Có thể tận dụng Suspense, Transition để tạo ra UX phản hồi tốt hơn và tự nhiên hơn
- Tuy vậy, các ứng dụng và thư viện hiện có có thể sẽ cần công việc migrate để hỗ trợ hoàn toàn New Architecture. Việc này nên được tiến hành từng bước, nhưng khi hoàn tất sẽ có thể tận dụng đầy đủ lợi ích của kiến trúc mới
- Kiến trúc này đã được sử dụng trong ứng dụng Facebook và Instagram của Meta, đồng thời có các trường hợp thành công như Expensify, Kraken, BlueSky
- Nhìn chung, New Architecture là một bước tiến lớn cho tương lai của React Native. Hy vọng nó sẽ được cộng đồng đón nhận tốt nhờ sự hợp tác chung
6 bình luận
Lần đầu tôi nghe nói đến React Native dường như đã là chuyện từ rất lâu rồi. Dù bắt đầu từ Facebook, việc đến giờ vẫn còn chưa ra bản 1.0 mới thực sự đáng ngạc nhiên..
Tôi chưa từng dùng RN lần nào nên cũng khá tò mò; theo cảm giác thì có vẻ nó sẽ được tối ưu cho Android hơn, nhưng việc thực tế hiệu năng trên iOS lại tốt hơn thì thật thú vị.
Bên mình có vẻ gần như mọi crash đều phát sinh trên Android.
Trên Android thì cực kỳ tệ... tệ đến mức khủng khiếp..
Có vẻ như mới đổi engine sang hermes chưa được bao lâu mà giờ lại đập đi làm lại rồi nhỉ
Ý kiến trên Hacker News
Có 4 năm kinh nghiệm phát triển ứng dụng React Native và API backend; việc chuyển sang Expo đã giải quyết được nhiều vấn đề nhưng vẫn còn lỗi. iOS ổn định hơn Android và hiệu năng cũng tốt hơn. React Native dễ học và có hệ sinh thái JS lớn nên đáng để khuyến nghị, nhưng hiện tại đang dùng Flutter
Có nhiều ý kiến khác nhau về React Native; một số người tỏ ra không hài lòng với Expo và khuyến nghị Kotlin Multiplatform. Cũng có ý kiến cho rằng các cuộc thảo luận trên Hacker News ngày càng trở nên vô nghĩa
Với tư cách là lập trình viên Flutter, cho rằng Swift UI và Compose phù hợp hơn cho phát triển di động; nếu bắt đầu một ứng dụng mới thì sẽ không dùng Flutter hay React Native
React Native ổn trên iOS nhưng chậm trên Android. Hermes khá thú vị nhưng vẫn cần nhiều polyfill. Mong chờ ngày web thay thế React Native
Đang phát triển Bluesky bằng Expo/RN và trong các thử nghiệm ban đầu với kiến trúc mới, hiệu năng Android đã được cải thiện
Đã có trải nghiệm tích cực khi dùng React Native cùng Expo, và với tư cách là lập trình viên solo, RN đã giúp làm được rất nhiều thứ. Đang mong chờ kiến trúc mới
Tốc độ render của Flutter nhanh gấp 5 lần React Native, và khi dùng React trên web thì tốc độ còn nhanh hơn
Đã thấy một tweet nói rằng Capacitor hữu ích cho việc port ứng dụng web NextJS
React Native đã tốt lên đáng kể trong năm nay, và khi react-strict-dom sẵn sàng thì sẽ mang lại thay đổi lớn