Turbo Module trong React Native — nó là gì, JSI hoạt động thế nào và kiến trúc

Turbo Module là gì?

Turbo Module là một thành phần của kiến trúc React Native mới thay thế Bridge cổ điển cho giao tiếp giữa JavaScript và mã gốc. Không giống như Bridge, nơi mỗi thông điệp được tuần tự hóa thành JSON và truyền bất đồng bộ, Turbo Module sử dụng JSI — một lớp cho phép JavaScript gọi trực tiếp các hàm viết bằng C++.

Kiến trúc Turbo Module đã được giới thiệu bởi nhóm Meta tại React Conf 2021 như một phần của quá trình tái cấu trúc lớn hơn của React Native với tên mã «The New Architecture». Bên cạnh Turbo Module, kiến trúc mới bao gồm Fabric (trình kết xuất mới), Codegen (trình tạo mã) và JSI (giao diện tương tác). Cùng nhau, các thành phần này giải quyết các vấn đề hiệu suất đã tích tụ trong React Native từ năm 2015.

Turbo Module giải quyết ba vấn đề chính của mô-đun gốc cổ điển: bất đồng bộ (tất cả các lệnh gọi phải qua hàng đợi), tuần tự hóa (mỗi lần gọi yêu cầu chuyển đổi JSON) và tải (tất cả mô-đun được khởi tạo khi khởi động ứng dụng). Với Turbo Module, các phương thức gốc được gọi một cách đồng bộ, dữ liệu được truyền mà không cần sao chép và các mô-đun được tải theo yêu cầu.

JSI hoạt động thế nào

JSI (JavaScript Interface) là API C++ tạo một lớp giữa công cụ JavaScript (Hermes hoặc JSC) và mã gốc. JSI cung cấp các đối tượng host — các đối tượng C++ trông giống như các đối tượng và phương thức JavaScript thông thường. Khi JavaScript gọi một phương thức của đối tượng đó, JSI trực tiếp thực thi mã C++ tương ứng mà không cần tuần tự hóa và không cần chuyển luồng.

Sự khác biệt chính giữa JSI và Bridge là không có sao chép dữ liệu. Trong Bridge, mỗi giá trị được tuần tự hóa thành chuỗi JSON, truyền qua hàng đợi và giải tuần tự hóa. JSI truyền con trỏ đến dữ liệu trong bộ nhớ, cho phép làm việc với khối lượng dữ liệu lớn mà không mất hiệu suất. Theo các thử nghiệm của Meta, các lệnh gọi JSI thực thi nhanh hơn 5–10 lần so với các lệnh gọi tương đương qua Bridge.

HostObject và gọi đồng bộ

JSI định nghĩa giao diện HostObject — một lớp C++ mà React Native đăng ký trong môi trường JS như một đối tượng thông thường. Khi mã JS truy cập thuộc tính hoặc gọi phương thức của HostObject, JSI chặn lệnh gọi và thực thi mã C++. Điều này cho phép thực hiện các thao tác đồng bộ mà không cần chờ hàng đợi Bridge.

// Ví dụ JSI HostObject — gọi gốc đồng bộ
class ImageCompressorHostObject : public jsi::HostObject {

    jsi::Value get(
        jsi::Runtime& rt,
        const jsi::PropNameID& propName
    ) override {
        auto name = propName.utf8(rt);
        if (name == "compressImage") {
            return jsi::Function::createFromHostFunction(
                rt,
                jsi::PropNameID::forUtf8(rt, name),
                2,
                [](jsi::Runtime& rt,
                   const jsi::Value& thisValue,
                   const jsi::Value* args,
                   size_t count) -> jsi::Value {
                    return jsi::Value(rt, compressNative(
                        args[0].asString(rt).utf8(rt),
                        args[1].asNumber()
                    ));
                }
            );
        }
        return jsi::Value::undefined();
    }
};

Mã trên minh họa cách JSI HostObject xử lý lệnh gọi compressImage từ JavaScript. Hàm nhận hai đối số (chuỗi đường dẫn và số chất lượng), gọi hàm gốc compressNative và trả về kết quả — tất cả đồng bộ, không Bridge, không JSON. Đây là lợi thế chính của JSI so với kiến trúc cổ điển.

JSI là một phần của thời gian chạy chính của React Native và không phụ thuộc vào một công cụ JavaScript cụ thể. Nó hoạt động với cả Hermes và JavaScriptCore (JSC), cung cấp một giao diện thống nhất để tương tác với môi trường gốc.

Turbo Module vs Bridge: so sánh

So sánh giữa Turbo Module và Bridge cho thấy sự tiến hóa của kiến trúc React Native. Bridge được thiết kế cho việc ra mắt nhanh chóng của React Native vào năm 2015, nhưng với sự phức tạp ngày càng tăng của ứng dụng, các hạn chế của nó trở nên nghiêm trọng. Turbo Module giải quyết những vấn đề này ở cấp độ kiến trúc.

Trong thực tế, sự khác biệt rõ nhất khi gọi phương thức gốc thường xuyên — ví dụ, khi xử lý phương tiện hoặc làm việc với GPU. Đối với các lệnh gọi hiếm (một lần mỗi phiên), sự khác biệt hiệu suất không đáng kể. Turbo Module cũng đơn giản hóa việc làm việc với dữ liệu nhị phân lớn — hình ảnh, video, giao thức nhị phân — mà trong Bridge yêu cầu các giải pháp thay thế với hệ thống tệp.

Ví dụ tạo Turbo Module

Việc tạo Turbo Module bắt đầu bằng việc xác định đặc tả TypeScript. Codegen tự động tạo giao diện C++ và các stub Objective-C/Java dựa trên đặc tả này. Điều này thay đổi hoàn toàn cách tiếp cận phát triển — nhà phát triển mô tả API một lần và Codegen tạo mọi thứ khác.

// ImageCompressor.ts — đặc tả Turbo Module
import type { TurboModule } from 'react-native';
import type { Double } from 'react-native/Libraries/Types/CodegenTypes';

export interface Spec extends TurboModule {
  compressImage(
    imagePath: string,
    quality: Double
  ): Promise<string>;
}

Tạo mã qua Codegen

Codegen phân tích đặc tả TypeScript và tạo HostObject C++, giao thức Objective-C và giao diện Java. Nhà phát triển chỉ cần triển khai logic gốc. Cách tiếp cận này đảm bảo rằng các kiểu ở phía JavaScript và phía gốc luôn khớp nhau, loại bỏ lỗi ánh xạ thủ công.

// Triển khai TurboModule cho iOS (stub được tạo)
@interface ImageCompressorModule ()
    RCT_EXPORT_MODULE(ImageCompressor)
@end

@implementation ImageCompressorModule

RCT_EXPORT_METHOD(compressImage:(NSString *)imagePath
                  quality:(NSNumber *)quality
                  resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject)
{
    NSData *compressed = [ImageProcessor compressAtPath:imagePath
                                                    quality:quality.doubleValue];
    resolve([NSString stringWithUTF8String:compressed.UTF8String]);
}

@end

Một lợi thế quan trọng là tải trễ. Turbo Module không được khởi tạo khi khởi động ứng dụng mà chỉ được tạo khi truy cập lần đầu từ JavaScript. Điều này giảm thời gian khởi động ứng dụng 30–50% so với cách tiếp cận cổ điển nơi tất cả mô-đun gốc được tải ngay lập tức.

Di chuyển từ Bridge sang Turbo Module

Việc chuyển đổi từ Bridge sang Turbo Module không yêu cầu viết lại toàn bộ ứng dụng. React Native 0.73+ hỗ trợ cả hai kiến trúc song song — các mô-đun Bridge tiếp tục hoạt động và các mô-đun mới có thể được tạo dưới dạng Turbo Module. Điều này cho phép di chuyển dần dần, từng mô-đun một.

Để bật kiến trúc mới trong dự án React Native 0.76+, đặt cờ newArchEnabled thành true trong tệp react-native.config.js. Sau đó, tất cả mô-đun gốc hiện có tiếp tục hoạt động qua Bridge và các mô-đun mới có thể được tạo dưới dạng Turbo Module. Codegen tự động xử lý cả hai tùy chọn.

// react-native.config.js — bật kiến trúc mới
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: [],
  newArchEnabled: true,
};

Nên bắt đầu di chuyển với các mô-đun được gọi thường xuyên nhất từ JavaScript — chúng sẽ nhận được mức tăng hiệu suất lớn nhất. Các mô-đun được gọi hiếm khi (một lần mỗi phiên) có thể giữ lại trên Bridge mà không mất hiệu suất đáng kể.

• Codegen — sử dụng đặc tả TypeScript để tạo tự động giao diện gốc.
• Kiểm thử E2E — kiểm tra hoạt động của mô-đun trên cả hai kiến trúc, đặc biệt sau khi cập nhật React Native.
• Kế hoạch dự phòng — nếu có vấn đề với Turbo Module, có thể tạm thời quay lại Bridge qua cờ cấu hình.