React Native: nó là gì, cách Bridge hoạt động và môi trường JavaScript

React Native là gì

React Native là framework được tạo bởi nhóm Facebook (nay là Meta) và phát hành dưới dạng mã nguồn mở vào năm 2015. Không giống như các phương pháp lai (Cordova, Ionic), React Native không sử dụng WebView. Thay vào đó, các thành phần JavaScript được ánh xạ tới các phần tử UI gốc: View → UIView / android.view.View, Text → UILabel / TextView, ScrollView → UIScrollView / ScrollView.

Phiên bản đầu tiên của React Native chỉ hỗ trợ iOS. Hỗ trợ Android xuất hiện vào năm 2016. Phiên bản 0.60 (2019) giới thiệu Autolinking — liên kết tự động các phụ thuộc gốc. React Native 0.68 (2022) bao gồm kiến trúc Fabric + TurboModules mới. Phiên bản ổn định hiện tại 0.74 (2024) đã được chuyển đổi hoàn toàn sang New Architecture với hỗ trợ Yoga 3.0 cho bố cục Flexbox.

Theo Statista 2024, React Native được sử dụng trong 38% các dự án đa nền tảng. Framework được sử dụng bởi Discord, Instagram, Shopify, Pinterest, Skype và Uber Eats. Meta sử dụng React Native trong Facebook và Instagram — ứng dụng di động chính với 2 tỷ người dùng.

Lịch sử và sự phát triển của React Native

React Native được công bố tại React.js Conf vào tháng 1 năm 2015. Ý tưởng là chuyển mô hình khai báo của React từ web sang các nền tảng di động. Commit đầu tiên trong kho lưu trữ xuất hiện vào năm 2013 như một dự án nội bộ của Facebook để tạo ứng dụng Facebook Groups trên iOS.

Phiên bản 0.70 (2022) giới thiệu Hermes làm công cụ JavaScript mặc định. Hermes là công cụ biên dịch trước (AOT) được tối ưu hóa cho thiết bị di động. Nó giảm thời gian khởi động ứng dụng xuống 50% và giảm kích thước APK xuống 30% so với JavaScriptCore. Hermes hỗ trợ ES6 và một phần ES2020.

Sự khác biệt giữa React Native và React Web

React Web hiển thị các thành phần vào phần tử DOM (div, span, p) qua ReactDOM. React Native hiển thị vào các thành phần gốc của nền tảng. Thay vì <div> hãy dùng <View>, thay vì <span> hãy dùng <Text>. Kiểu được định nghĩa qua StyleSheet.create(), được dịch sang các thuộc tính CSS của nền tảng. Flexbox được bật mặc định qua công cụ Yoga.

Điều hướng trong React Native khác với web. Thay vì react-router-dom, React Navigation được sử dụng — một thư viện gốc hỗ trợ các bộ điều hướng Stack, Tab và Drawer. React Navigation 6.x sử dụng hoạt ảnh gốc (useNativeDriver) và tích hợp Deep Links. Để điều hướng màn hình gốc với UINavigationController iOS và Fragment Android, thư viện react-native-navigation của Wix được sử dụng.

Kiến trúc React Native

Kiến trúc React Native theo truyền thống được xây dựng xung quanh Bridge — một kênh JSON bất đồng bộ giữa môi trường JavaScript và mã gốc. Từ phiên bản 0.68, Meta đã giới thiệu New Architecture, thay thế Bridge bằng JSI (JavaScript Interface) và Fabric. Hãy xem xét cả hai mô hình.

Bridge và Fabric

Bridge là một giao thức JSON được tuần tự hóa chạy trên nhiều luồng: JS Thread (diễn giải mã React), Main Thread (UI) và Native Modules Thread (API). Mỗi tương tác giữa JS và mã gốc trải qua quá trình tuần tự hóa và giải tuần tự hóa đối tượng, tạo ra độ trễ khi gọi thường xuyên. Khi cuộn danh sách 1000 mục, Bridge tạo ra tới 10.000 thông điệp JSON mỗi giây.

Fabric là một hệ thống hiển thị mới trong React Native. Thay vì Bridge, Fabric sử dụng Cây bóng (Shadow Tree) bằng C++ đồng bộ hóa với luồng UI qua JSI. Điều này loại bỏ việc tuần tự hóa JSON: mã C++ gốc gọi trực tiếp các hàm trong môi trường JavaScript và ngược lại. Fabric giảm độ trễ hiển thị từ 16 ms (Bridge) xuống 2–4 ms.

TurboModules là phần thứ hai của New Architecture. Trong mô hình cũ, tất cả các mô-đun gốc được tải khi khởi động ứng dụng. TurboModules tải các mô-đun một cách lười biếng (lazy loading) — chỉ khi mã JS yêu cầu chúng lần đầu tiên. Điều này giảm thời gian khởi động nguội 40% trong các ứng dụng có 20+ mô-đun gốc.

Ví dụ ứng dụng React Native

import React from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';

const App = () => {
  const data = [
    { id: '1', title: 'React Native' },
    { id: '2', title: 'Flutter' },
  ];

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Text>{item.title}</Text>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
});

export default App;

Mô-đun gốc

Mô-đun gốc là cơ chế gọi API nền tảng từ JavaScript. Nếu chức năng không được bao phủ bởi các thành phần React Native tiêu chuẩn (máy ảnh, Bluetooth, sinh trắc học), nhà phát triển viết một mô-đun bằng Swift/Kotlin và đăng ký nó qua RCTBridgeModule hoặc TurboModule. Hàm gốc được gọi từ JS qua NativeModules.CameraModule.takePhoto().

React Native cung cấp mô-đun gốc có sẵn để truy cập gia tốc kế (react-native-sensors), định vị địa lý (@react-native-community/geolocation), sinh trắc học (react-native-biometrics) và thông báo cục bộ (@notifee/react-native). Cho các tình huống tùy chỉnh, Expo cung cấp Expo Modules API — một giao diện đơn giản hơn để tạo mô-đun gốc mà không cần Xcode hoặc Android Studio.

Lợi ích của React Native

Cộng đồng lớn mạnh — React Native có cộng đồng lớn nhất trong số các framework đa nền tảng. Trên GitHub, dự án có 117.000+ sao và 1800+ người đóng góp. npm tải react-native 3 triệu+ lần mỗi tuần. Câu hỏi về React Native chiếm 5% tổng số câu hỏi trên Stack Overflow trong phần phát triển di động.

Hệ sinh thái JavaScript — nhà phát triển React sử dụng cùng các công cụ như trên web: npm, Babel, ESLint, Prettier, Jest, TypeScript. Logic kinh doanh có thể được tái sử dụng giữa phiên bản web (React) và ứng dụng di động (React Native). Các thư viện Redux, Zustand, React Query và React Hook Form hoạt động trên cả hai nền tảng mà không cần thay đổi.

Expo là SDK và bộ công cụ đơn giản hóa việc phát triển React Native. Expo cung cấp các mô-đun có sẵn (máy ảnh, thông báo, bản đồ, OAuth), bản dựng đám mây (EAS Build) và cập nhật OTA (EAS Update). Expo Go cho phép chạy ứng dụng trên thiết bị vật lý mà không cần Xcode hoặc Android Studio. Theo dữ liệu Expo 2024, 70% dự án React Native mới sử dụng Expo.

Cập nhật OTA — tính năng có sẵn qua Expo Update và CodePush (Microsoft). Nhà phát triển có thể gửi cập nhật gói JavaScript trực tiếp đến người dùng mà không cần qua đánh giá App Store hoặc Google Play. Điều này tăng tốc sửa lỗi nghiêm trọng từ 2–5 ngày (chờ đánh giá) xuống còn 1–2 giờ.

Hỗ trợ TypeScript được bao gồm mặc định từ React Native 0.71. Mẫu dự án bao gồm tsconfig.json, kiểu cho tất cả các thành phần và hỗ trợ chế độ nghiêm ngặt. Flow (kiểu tĩnh của Facebook) cũng được hỗ trợ, nhưng Meta chính thức khuyến nghị TypeScript. Mẫu TypeScript chiếm 85% các dự án mới theo khảo sát State of React Native 2024.

Hệ sinh thái và thư viện phổ biến

npm là kho lưu trữ gói chính cho React Native. Tìm kiếm thư viện được lọc theo từ khóa react-native. Cài đặt sử dụng npm install hoặc yarn add. React Native CLI tự động liên kết các phụ thuộc gốc (từ phiên bản 0.60). Cho các dự án Expo, việc cài đặt được quản lý qua expo install, chọn phiên bản thư viện tương thích.

Thư viện chính

@react-navigation/native — tiêu chuẩn thực tế cho điều hướng trong React Native. Thư viện bao gồm Stack Navigator (chuyển tiếp có hoạt ảnh), Tab Navigator (menu dưới cùng cho iOS/Android), Drawer Navigator (menu bên) và Material Top Tab. React Navigation 7.x (2024) giới thiệu cấu hình tuyến đường tĩnh và hỗ trợ đầy đủ React 18 với useSyncExternalStore.

react-native-reanimated — thư viện cho hoạt ảnh hiệu suất cao. Reanimated 3.x chạy hoạt ảnh trong luồng UI (worklet), bỏ qua luồng JS. Điều này đảm bảo 60 FPS ngay cả khi tạo hoạt ảnh cho 100+ phần tử. useSharedValue, useAnimatedStyle và withSpring thay thế API Animated từ thư viện tiêu chuẩn. Reanimated xử lý cử chỉ chạm qua react-native-gesture-handler.

@tanstack/react-query — thư viện quản lý trạng thái máy chủ. React Query lưu cache phản hồi API, tự động tìm nạp lại dữ liệu khi thay đổi mạng (refetchOnReconnect) và hỗ trợ phân trang với useInfiniteQuery. Phiên bản 5.x bao gồm cập nhật lạc quan cho UX — giao diện cập nhật trước khi nhận phản hồi máy chủ, sau đó điều chỉnh.