React Native được tích hợp nhiều ưu điểm như hỗ trợ đa nền tảng, cập nhật OTA, tải lại trực tiếp, tiết kiệm chi phí, v.v. nhưng nút cổ chai lớn nhất trong việc mở rộng quy mô ứng dụng gốc phản ứng là hiệu suất khi bạn thêm nhiều mô-đun hơn, khi ứng dụng trở nên cần nhiều dữ liệu hoặc khi có nhiều yêu cầu đi qua cầu.

Nhưng kiến ​​trúc hiện tại hoạt động như thế nào?

Kiến trúc React Native phụ thuộc vào ba luồng: a) Chuỗi giao diện người dùng: Đây là luồng ứng dụng chính được sử dụng để hiển thị chế độ xem Android và iOS. b) Luồng bóng: Đây là loại luồng nền tính toán bố cục của các phần tử (sử dụng Yoga ) trước khi hiển thị trên nền tảng máy chủ. c) Chuỗi JS: Gói JS chịu trách nhiệm xử lý tất cả logic trong ứng dụng gốc phản ứng của bạn.

Sự tương tác giữa các luồng này không trực tiếp và mỗi khi một luồng cần tương tác với luồng kia, nó phải thực hiện nhiệm vụ nặng nề là tuần tự hóa và giải tuần tự hóa dữ liệu thành JSON để đi qua cầu nối. Điều này dẫn đến việc sao chép dữ liệu không cần thiết và cây cầu này có thể trở nên đông đúc khá dễ dàng vì các hoạt động không đồng bộ và không có cách đánh máy nghiêm ngặt.

Một số hạn chế của kiến ​​trúc hiện tại:
1. Javascript và phía gốc không nhận biết được nhau và dựa vào các thông báo JSON không đồng bộ.
2. Tất cả các mô-đun tải khi khởi động giúp tăng thời gian tương tác.
3. Không ưu tiên các hành động: Các tương tác quan trọng của người dùng không thể được ưu tiên hơn các hành động khác.
4. Cầu tuần tự hóa
5. Các phần tử giao diện người dùng không thể truy cập trực tiếp từ luồng JS.

Giới thiệu JSI

JSI mang đến một sự thay đổi lớn trong cách javascript và phần gốc tương tác. Nó cung cấp giao tiếp trực tiếp giữa hai lĩnh vực với sự trợ giúp của giao diện giữa JS và C++. Sử dụng Giao diện JavaScript, JS có thể giữ tham chiếu đến các đối tượng lưu trữ và gọi các phương thức trên chúng. Với sự trợ giúp của đối tượng máy chủ, giờ đây chúng ta có thể sử dụng các đối tượng gốc trong ngữ cảnh javascript. Cây cầu từng là nút cổ chai lớn nhất được chia thành nhiều phần:

Sợi vải

Hệ thống kết xuất mới do Facebook tạo ra, là kiến ​​trúc lại của trình quản lý giao diện người dùng. Trình kết xuất này được triển khai trong C++ và lõi được chia sẻ giữa các nền tảng. Trong quá trình tạo bố cục triển khai trước đó bao gồm nhiều bước như tuần tự hóa JSON và nhảy qua cầu nối, vấn đề lớn khi cầu nối bị chặn, ví dụ: Khung hình bị rớt trong khi cuộn qua một danh sách vô hạn. Việc triển khai mới cho phép người quản lý giao diện người dùng tạo Bóng cây trực tiếp trong C++, giúp nâng cao đáng kể trải nghiệm bằng cách giảm số lần nhảy qua các lĩnh vực. Các hoạt động đồng bộ và an toàn theo luồng được thực thi từ React (JavaScript) vào trình kết xuất (C++), thường là trên luồng JavaScript. Nó cũng liên quan đến việc tuần tự hóa dữ liệu ít hơn vì các giá trị javascript có thể được chọn trực tiếp từ JSI. Kiểm soát trực tiếp này cũng giúp ưu tiên các hành động, trình kết xuất hiện có thể ưu tiên các tương tác nhất định của người dùng để đảm bảo chúng được xử lý kịp thời. Điều này sẽ cải thiện đáng kể hiệu suất trong danh sách, điều hướng và xử lý cử chỉ.

Mô-đun Turbo

Trong lần triển khai trước, chúng tôi không có tham chiếu đến các mô-đun gốc nên mọi mô-đun được tải khi khởi động, điều này làm tăng TTI (Thời gian để tương tác) nhưng với các mô-đun turbo, chúng tôi có thể lười tải các mô-đun khi cần và điều này sẽ giúp ích trong việc cải thiện thời gian khởi động. Ví dụ: Nếu bạn có một mô-đun để in tài liệu từ một liên kết, giờ đây chúng tôi có thể tải mô-đun này khi chúng tôi truy cập màn hình in chứ không phải khi khởi động ứng dụng đang được thực hiện trong kiến ​​trúc trước đó. Khả năng viết mô-đun bằng C++ cũng tạo thêm lợi thế vì nó làm giảm việc triển khai trùng lặp trên các nền tảng.

mã nguồn

Để gắn kết tất cả những thứ này lại với nhau và làm cho cả hai lĩnh vực tương thích, nhóm React Native đã xây dựng một trình kiểm tra loại để tự động hóa khả năng tương thích giữa phía JS và phía Bản địa. Công cụ này được gọi là Codegen. Nó sử dụng phương pháp mô-đun, có nghĩa là bất kỳ ngôn ngữ Javascript được nhập tĩnh nào cũng có thể được hỗ trợ bằng cách sử dụng trình phân tích cú pháp cho hệ thống đó. Bằng cách sử dụng JavaScript đã nhập làm nguồn gốc của sự thật, trình tạo này có thể xác định các tệp giao diện mà Fabric và TurboModules cần để gửi tin nhắn qua các lĩnh vực một cách tự tin. Codegen cũng cung cấp loại thời gian biên dịch an toàn, nghĩa là cả hai môi trường đều có thể thực thi các lệnh mà không cần bất kỳ kiểm tra thời gian chạy nào, nghĩa là kích thước mã nhỏ hơn để vận chuyển và thực thi nhanh hơn.
Vì bây giờ chúng tôi có mã C++ và C++ được gõ mạnh nên chúng tôi buộc phải nhập mã JS của mình, bởi vì chúng tôi phải xác định các loại và không thể viết bất kỳ chỗ nào trong mã. Về cơ bản, nó tạo ra một giao diện cho bạn và bây giờ vì chúng được tạo và ở dạng C++, về cơ bản, giờ đây chúng ta có thể tin tưởng vào dữ liệu được gửi và chúng ta không cần phải xác minh lại dữ liệu. Điều này cũng có nghĩa là bằng cách sử dụng kiểm tra loại, chúng tôi có thể dễ dàng xác định các sự cố trong giai đoạn phát triển có thể dẫn đến sự cố nghiêm trọng hoặc trải nghiệm người dùng không tốt.

Một số ưu điểm chính của JSI

1. Mã Javascript có thể giữ tham chiếu đến bất kỳ thành phần UI gốc nào và gọi các phương thức trên đó (Tương tự như thao tác DOM trong Web)
2. Liên kết nhanh và trực tiếp với mã gốc có thể cải thiện đáng kể hiệu suất, ví dụ: MMKV sử dụng JSI nhanh hơn ~30 lần so với Asyncstorage.
3. Có thể sử dụng các công cụ khác ngoài JavaScript Core.
4. Các Mô-đun gốc có thể được tải khi cần.
5. Kiểm tra kiểu tĩnh để làm cho mã JS và mã gốc tương thích.

React native JSI hiện đang trong giai đoạn triển khai thử nghiệm và khi nhiều dự án áp dụng thay đổi này, chúng ta sẽ biết thêm về những hạn chế và tác động của kiến ​​trúc mới nhưng có một điều chắc chắn là tương lai của việc phát triển ứng dụng phản ứng gốc và ứng dụng đa nền tảng có vẻ thú vị.