React Native Vận Hành Mã Của Bạn Như Thế Nào? Một Cái Nhìn Toàn Tập!

Lê Lân

13/07/2025

Cách React Native Thực Thi Mã: Giải Mã Quy Trình Chạy Ứng Dụng Di Động

Mở Đầu

Bạn đã bao giờ tự hỏi React Native thực sự vận hành mã nguồn của bạn như thế nào chưa? Đây là câu hỏi quan trọng đối với bất kỳ ai làm việc với React Native, bởi vì sự hiểu biết sâu sắc về cách JavaScript, iOS và Android xử lý mã nguồn sẽ giúp bạn phát triển ứng dụng hiệu quả hơn. Khác với các nền tảng native sử dụng ngôn ngữ biên dịch, JavaScript không có hệ thống build truyền thống, mà thay vào đó trải qua một quy trình biến đổi phức tạp. Bạn viết mã JavaScript/TypeScript, nhưng ứng dụng lại điều khiển các thành phần native trên iOS và Android. Quá trình này phân thành nhiều giai đoạn: transpilation, bundling, thực thi JavaScript, giao tiếp với native và render giao diện người dùng nguyên bản.

Bài viết này sẽ giúp bạn hiểu chi tiết các bước hoạt động đằng sau React Native, từ quá trình chuyển đổi mã cho đến cách ứng dụng được chạy trên thiết bị.

Quy Trình Hoạt Động Của React Native

1. Quá Trình Phát Triển và Build

Viết mã TypeScript

Quá trình bắt đầu khi bạn viết mã ứng dụng sử dụng TypeScript (TS), một ngôn ngữ phát triển trên nền JavaScript giúp bổ sung tính năng gõ kiểu tĩnh và nhiều tiện ích khác.

Chuyển đổi TypeScript sang JavaScript (Transpilation)

Đây là bước cần thiết để biến mã TS thành mã JavaScript mà runtime của React Native có thể hiểu và thực thi.

Công cụ tsc được Metro bundler gọi trong giai đoạn build để đọc các file .ts và .tsx , thực hiện kiểm tra kiểu và loại bỏ các cú pháp đặc trưng của TypeScript như annotation kiểu, interface mà chỉ giữ lại mã JavaScript thuần. Kết quả cho ra là mã JavaScript chuẩn.

Bundling Mã JavaScript

Metro, trình bundler chuyên biệt của React Native, chịu trách nhiệm:

Transpilation bổ sung: Vì JavaScript và JSX bạn viết có thể sử dụng chuẩn ECMAScript mới hoặc cú pháp JSX, Metro dùng Babel để chuyển đổi chúng thành đoạn mã JS tương thích với engine trên thiết bị.

Gói gọn mã: Metro gom toàn bộ mã JS và các dependencies thành một hoặc vài file bundle tối ưu, giúp tải nhanh lúc runtime.

Giai đoạn	Công việc chính	Kết quả đầu ra
TypeScript -> JavaScript	Biên dịch TS sang JS và loại bỏ cú pháp TS	File JS thuần (.js)
Bundling với Metro	Chuyển Babel + gom bundle	File bundle (.js bundle)

2. Khởi Động và Thực Thi Ứng Dụng

Native Shell App

Khi bạn build app React Native cho iOS hoặc Android, một ứng dụng "vỏ bọc" native sẽ được tạo ra. Trên iOS là Objective-C hoặc Swift; trên Android là Java hoặc Kotlin. Vỏ bọc này chịu trách nhiệm tải JavaScript bundle và khởi chạy engine JavaScript.

Engine JavaScript: JSC vs Hermes

JavaScriptCore (JSC): Engine JS của Safari, được sử dụng trên iOS và Android cũ hơn.

Hermes: Engine mã nguồn mở do Meta phát triển tối ưu riêng cho React Native, cho phép biên dịch trước bundle thành bytecode giúp tăng tốc thời gian khởi động và giảm bộ nhớ sử dụng.

Hermes giúp cải thiện đáng kể hiệu năng ứng dụng bằng cách thực thi bytecode thay vì giải thích từng dòng JavaScript khi chạy.

Quá trình thực thi

Khi app khởi động, native shell chạy engine JS, tải bundle lên và thực thi mã JS. React bắt đầu dựng cây component trong bộ nhớ và chuẩn bị cho việc render giao diện.

3. iOS: Quy Trình Biên Dịch Native

Ngôn ngữ và Công cụ

iOS sử dụng Swift và Objective-C, hai ngôn ngữ biên dịch trực tiếp sang mã máy. Xcode đóng vai trò trung tâm trong quá trình build sử dụng Clang (cho Objective-C) và LLVM (cho Swift).

Các bước chính

Biên dịch: Mã nguồn Swift/Objective-C được biên dịch thành mã nhị phân máy.

Liên kết: Các thư viện hệ thống và bên thứ ba được liên kết với mã nguồn.

Ký hiệu và đóng gói: Ứng dụng được ký bằng chứng thực hợp lệ và đóng gói thành tệp .ipa .

Ứng dụng iOS chạy trực tiếp trên phần cứng thiết bị với mã nhị phân tối ưu.

4. Android: Quy Trình Biên Dịch Native

Ngôn ngữ và Công cụ

Android sử dụng Java và Kotlin dựa trên JVM nhưng cần chuyển đổi thêm sang định dạng xử lý được bởi Android Runtime (ART).

Các bước chính

Biên dịch: Mã nguồn Java/Kotlin thành các file .class (bytecode JVM).

Chuyển đổi DEX: Bytecode được chuyển thành file .dex (Dalvik Executable) cho môi trường Android.

Xử lý tài nguyên: XML, ảnh và các assets được xử lý và đóng gói.

Ký và đóng gói: App được ký bằng keystore hợp lệ và đóng gói thành file .apk hoặc .aab .

Bước	Mô tả
1	Biên dịch Java/Kotlin sang bytecode `.class`
2	Chuyển bytecode thành DEX phù hợp với ART
3	Xử lý tài nguyên và liên kết thư viện
4	Ký chữ và đóng gói thành file cài đặt `.apk/.aab`

5. Giao Tiếp Giữa JavaScript và Native: Bridge & JSI

Bridge (Kiến trúc cũ)

Bridge đóng vai trò trung gian trung chuyển dữ liệu không đồng bộ giữa JavaScript và nền tảng native. Tuy nhiên, việc này tốn thời gian và gây độ trễ (latency) do phần quá trình tuần tự hóa và giải tuần tự hóa dữ liệu.

JavaScript Interface (JSI) - Kiến trúc mới

JSI cho phép gọi các hàm native trực tiếp, đồng bộ, không cần truyền qua JSON như Bridge. Đây chính là nền tảng của:

Fabric: hệ thống render UI mới nhanh hơn.

TurboModules: module native tải chậm, hiệu năng cao.

JSI giúp tăng tốc giao tiếp giữa bên JS và native, nâng cao trải nghiệm người dùng nhờ phản hồi nhanh và ổn định.

6. Native Modules và Native Components

Native Modules

Là các module cho phép truy cập các API nền tảng như camera, định vị, lưu trữ… JavaScript gọi các hàm của NativeModules, các hàm này được thực thi trong mã native và trả kết quả lại cho JS.

Native Components (View Managers)

React Native không render ra HTML như web, mà gửi các lệnh đến native View Managers. Ví dụ:

React yêu cầu tạo một <View>

iOS nhận lệnh và tạo một UIView

Android tạo một android.view.View

Điều này đảm bảo giao diện ứng dụng mang lại cảm giác native thực sự về tốc độ và trải nghiệm.

7. Chạy Ứng Dụng Trên Thiết Bị

Môi trường giả lập (Simulator/Emulator)

Android: Dùng Android Studio AVD Manager hoặc các lệnh adb , emulator để quản lý và chạy giả lập Android.

iOS: Sử dụng Simulator của Xcode hoặc command line xcrun simctl để khởi động và kiểm soát giả lập iOS.

Làm việc trên giả lập giúp phát triển và debug hiệu quả trong môi trường mô phỏng thiết bị thật.

Kết Luận

Nhìn chung, React Native hoạt động như một cầu nối mạnh mẽ giữa JavaScript và nền tảng native, sử dụng nhiều bước biến đổi và tối ưu để đảm bảo ứng dụng chạy mượt mà, giao diện đẹp và phản hồi nhanh chóng trên cả iOS và Android. Hiểu rõ từng thành phần trong chuỗi quá trình – từ xây dựng, biên dịch, thực thi đến giao tiếp giữa các thành phần – sẽ giúp bạn phát triển ứng dụng React Native hiệu quả hơn và tận dụng tối đa sức mạnh của nền tảng.

Hãy bắt đầu khám phá chi tiết và áp dụng kiến thức này để tạo nên những sản phẩm di động nổi bật và chuyên nghiệp!

Tham Khảo

Abdou, Nour. How React Native Works Internally . Dev.to, 2023.

React Native Documentation. Architecture Overview .

Meta Open-Source. Hermes JavaScript Engine .

Apple Developer. Building Apps .

Android Developers. Build and Run Your App .

June 11, 2024