React Native 'lột xác': Tạm biệt 'cầu' cũ, đón chào siêu tốc độ với kiến trúc mới!

Lê Lân

13/07/2025

Kiến Trúc Mới Của React Native: Cách Mạng Trong Phát Triển Ứng Dụng Di Động

Mở Đầu

React Native đã từng là nền tảng yêu thích để phát triển ứng dụng di động đa nền tảng nhờ khả năng sử dụng JavaScript. Tuy nhiên, kiến trúc cũ với cầu nối (bridge) chậm chạp đã giới hạn hiệu năng và trải nghiệm người dùng. Giờ đây, với kiến trúc mới sử dụng JSI (JavaScript Interface), TurboModules và Fabric Renderer, React Native đưa hiệu suất và trải nghiệm ứng dụng lên một tầm cao mới.

React Native không chỉ cải tiến tốc độ mà còn tăng tính nhất quán trong giao diện và khả năng tương tác sâu với các tính năng gốc như camera hay GPS. Bài viết này sẽ giải thích chi tiết từng tầng trong kiến trúc mới, giúp bạn dễ dàng hiểu được cách các thành phần này phối hợp để tạo nên một ứng dụng React Native hiện đại, mượt mà và hiệu quả.

So Sánh Kiến Trúc Cũ và Kiến Trúc Mới của React Native

Điểm Khác Biệt Chính

Kiến trúc cũ: Sử dụng cầu nối (bridge) để truyền thông tin giữa JavaScript và native code, gây ra độ trễ và hiệu năng thấp.

Kiến trúc mới: Áp dụng hệ thống JSI giúp JavaScript giao tiếp trực tiếp với native code, bỏ qua việc tuần tự hóa dữ liệu qua cầu nối truyền thống.

JSI là nền tảng giúp JavaScript và native code nói chuyện trực tiếp, nhanh hơn và hiệu quả hơn rất nhiều so với phương pháp truyền thống.

Tổng Quan Kiến Trúc Lớp Phân Cấp

App Layer (Lớp Ứng Dụng - Lớp Trên Cùng)

Ứng dụng được viết bằng JavaScript hoặc TypeScript.

Sử dụng các component React như <View> , <Button> , <Text> để xây dựng giao diện người dùng.

Chứa toàn bộ logic nghiệp vụ (business logic) của ứng dụng.

React Runtime + JSI Layer (Lớp Trung Gian)

Thực thi mã JavaScript trên engine như Hermes hoặc JavaScriptCore.

JSI kết nối trực tiếp JavaScript với native code mà không cần cầu nối truyền thống.

TurboModules hỗ trợ gọi các module native nhanh và hiệu quả (ví dụ: camera, pin).

Rendering & Bridge Layer (Fabric + Cập Nhật UI)

Fabric Renderer chuyển các React component thành native view thực sự.

Sử dụng Yoga – một engine layout dựa trên flexbox (CSS) để vẽ giao diện mượt mà và chính xác.

Giống như một họa sĩ tài năng đang vẽ ứng dụng lên màn hình điện thoại.

Native Platform Layer (Lớp Nền Tảng Gốc)

Giao tiếp trực tiếp với hệ điều hành (Android/iOS).

Viết code native bằng Kotlin/Java cho Android và Swift/Objective-C cho iOS.

Quản lý các phần cứng như camera, GPS, thông báo và nhiều hơn nữa.

Bảng Tổng Hợp So Sánh Các Thành Phần

Lớp Kiến Trúc	Chức Năng Chính	Công Nghệ/Đặc Điểm
App Layer	Viết app, xử lý logic kinh doanh	React components, JavaScript/TypeScript
React Runtime + JSI	Chạy JavaScript, kết nối trực tiếp đến native	Hermes, JavaScriptCore, JSI, TurboModules
Rendering & Bridge	Chuyển đổi component thành native views	Fabric Renderer, Yoga Layout Engine
Native Platform Layer	Xử lý phần cứng và hệ thống gốc	Kotlin/Java (Android), Swift/Obj-C (iOS)

Quy Trình Xử Lý Khi Người Dùng Nhấn Nút

Người dùng chạm vào màn hình (sự kiện UI) Sự kiện này được hệ điều hành (Android/iOS) nhận và xử lý đầu tiên.

Hệ thống native gửi sự kiện đến React Native Fabric Renderer lắng nghe và nhận sự kiện chạm.

Fabric chuyển sự kiện sang JavaScript Runtime qua JSI Sự kiện được truyền trực tiếp vào engine JavaScript mà không qua cầu nối chậm.

React Runtime xử lý sự kiện Hàm JavaScript liên quan (ví dụ onPress ) được gọi và logic nghiệp vụ được thực thi.

Cập nhật UI nếu cần thiết qua Fabric React tạo lại tree ảo, Fabric so sánh và cập nhật native views trực tiếp.

Mã Giả Xử Lý Nhấn Nút Ở Các Lớp

User Layer (JavaScript - App Layer)

function MyApp() {
  const [state, setState] = React.useState("");
  
  const handlePress = () => {
    console.log("Button tapped");
    setState("Show Hello Text");
  };
  
  return (
    <View>
      <Button title="Tap Me" onPress={handlePress} />
      {state === "Show Hello Text" && <Text>Hello World</Text>}
    </View>
  );
}

JS Runtime & JSI Layer

// JSI bridge exposes the button event handler
installJSFunction(runtime, "handlePress", []() {
  jsRuntime.invoke("handlePress"); // Gọi trực tiếp hàm JS
});

Fabric Renderer Layer (Native C++)

void onTouchEvent(ViewID id) {
  if (id == buttonViewID) {
    auto event = createPressEvent();
    dispatchEventToJSI(event); // Truyền sự kiện đến JS qua JSI
  }
}

void reconcileChanges(ReactTree newTree) {
  auto diff = diffTrees(oldTree, newTree);
  applyNativeChanges(diff); // Cập nhật giao diện
}

Native Platform Layer (Android/iOS)

fun updateNativeView(componentId: String, newProps: Props) {
  when (componentId) {
    "TextView" -> textView.text = newProps.text
    "ButtonView" -> button.title = newProps.title
  }
}

Kiến trúc mới cho phép JavaScript và native code phối hợp trực tiếp, giúp ứng dụng chạy nhanh hơn, mượt hơn và đáp ứng tốt hơn các thao tác người dùng so với cầu nối (bridge) truyền thống.

Kết Luận

Kiến trúc mới của React Native với JSI, TurboModules và Fabric Renderer đánh dấu bước tiến lớn về hiệu năng và trải nghiệm ứng dụng di động. Việc thay thế cầu nối chậm bằng hệ thống truyền thông trực tiếp giúp app khởi động nhanh, giao diện mượt mà và khả năng tương tác native sâu sắc hơn. Đối với lập trình viên, đây cũng là nền tảng vững chắc để xây dựng các ứng dụng đa nền tảng hiệu quả, duy trì sự nhất quán trên cả Android và iOS.

Hãy bắt đầu khám phá và áp dụng kiến trúc mới này để nâng cao chất lượng sản phẩm của bạn ngay hôm nay!

Tham Khảo

React Native Official Documentation: React Native Architecture

Facebook Engineering Blog (2021). “React Native New Architecture”

TurboModules and Fabric Renderer Technical Overview - Medium Article

Hermes JavaScript Engine - GitHub Repository

Yoga Layout Engine - GitHub Repository

June 21, 2024