reactnative newarchitecture mobileapp learning

Kiến Trúc React Native Mới: Nâng Tầm Hiệu Suất Ứng Dụng Di Động!

Lê Lân

19/07/2025

Kiến Trúc Mới Của React Native: Cuộc Cách Mạng Cho Các Nhà Phát Triển Mobile

Mở Đầu

Kiến trúc mới của React Native không chỉ đơn thuần là một bản cập nhật mà thực sự là một bước nhảy vọt trong lĩnh vực phát triển ứng dụng di động. Với sự kết hợp của ba công nghệ then chốt – Fabric, TurboModules và JSI – nó mở ra một kỷ nguyên mới cho hiệu suất, tính mở rộng và khả năng tùy biến.

Trong bài viết này, chúng ta sẽ cùng khám phá chi tiết về kiến trúc mới của React Native, nguyên nhân tại sao nó ra đời, các thành phần chính tạo nên nó, cách thức di chuyển từ kiến trúc cũ sang kiến trúc mới và các lợi ích to lớn mà các nhà phát triển có thể tận dụng. Ngoài ra, bài viết cũng sẽ cung cấp ví dụ thực tiễn về việc xây dựng module native với kiến trúc mới và hướng dẫn debug hiệu quả.

Tại Sao Cần Một Kiến Trúc Mới?

Hạn Chế Của Kiến Trúc Cũ

Dù kiến trúc React Native cũ đã đóng góp rất lớn cho cộng đồng, nó tồn tại một số nhược điểm ảnh hưởng tới trải nghiệm phát triển và hiệu suất ứng dụng.

Hiệu suất kém: Giao tiếp giữa JavaScript và native code thông qua cầu nối (bridge) chậm và không đồng bộ.

Tiêu thụ bộ nhớ cao: Dữ liệu bị nhân đôi khi truyền qua bridge, làm tăng lượng nhớ sử dụng.

Khó debug: Việc theo dõi và xử lý lỗi trong ranh giới JS-native gặp nhiều khó khăn.

Kiến trúc mới ra đời nhằm giải quyết tận gốc các vấn đề này, mang lại một framework nhanh hơn, ổn định hơn và dễ bảo trì hơn.

Các Thành Phần Chính Của Kiến Trúc Mới

1. Fabric – Hệ Thống Render Mới

Fabric là động cơ mới chịu trách nhiệm cách React Native hiển thị UI. Nó tận dụng concurrent mode của React để xử lý các cập nhật trạng thái phức tạp một cách nhanh chóng và mượt mà hơn.

Ví dụ: Cập nhật giao diện hiệu suất cao

import React, { useState, useTransition } from 'react';
import { View, Button, Text, StyleSheet } from 'react-native';

export default function App() {
  const [isPending, startTransition] = useTransition();
  const [count, setCount] = useState(0);

  const handleHeavyUpdate = () => {
    startTransition(() => {
      for (let i = 0; i < 5000; i++) {
        setCount(prev => prev + 1);
      }
    });
  };

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Count: {count}</Text>
      <Button title="Perform Heavy Update" onPress={handleHeavyUpdate} />
      {isPending && <Text>Updating...</Text>}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  text: { fontSize: 24, marginBottom: 20 },
});

Ưu điểm của Fabric

Hiệu suất tốt hơn: Cập nhật UI tức thì nhờ concurrent mode.

Layout thời gian thực: Các component phản hồi ngay lập tức mà không phải chờ bridge.

Code đơn giản: Giúp xây dựng animation và gesture phức tạp dễ dàng hơn.

2. TurboModules – Module Native Nhanh Hơn, Linh Hoạt Hơn

TurboModules thay thế hệ thống module native cũ bằng cách sử dụng phương thức gọi trực tiếp và tải module theo nhu cầu.

Ví dụ: Tạo TurboModule đo mức pin trên Android

Mã Java – tạo module native

// BatteryModule.java
package com.yourapp;

import android.os.BatteryManager;
import android.content.Intent;
import android.content.IntentFilter;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Promise;

public class BatteryModule extends ReactContextBaseJavaModule {
  BatteryModule(ReactApplicationContext context) {
    super(context);
  }

  @Override
  public String getName() {
    return "BatteryModule";
  }

  @ReactMethod
  public void getBatteryLevel(Promise promise) {
    try {
      IntentFilter ifilter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);
      Intent batteryStatus = getReactApplicationContext().registerReceiver(null, ifilter);
      int level = batteryStatus.getIntExtra(BatteryManager.EXTRA_LEVEL, -1);
      promise.resolve(level);
    } catch (Exception e) {
      promise.reject("Error", e);
    }
  }
}

Mã JavaScript – sử dụng module

import { NativeModules, Button, Text, View } from 'react-native';
import React, { useState } from 'react';

export default function App() {
  const [batteryLevel, setBatteryLevel] = useState(null);

  const fetchBatteryLevel = async () => {
    try {
      const level = await NativeModules.BatteryModule.getBatteryLevel();
      setBatteryLevel(level);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Battery Level: {batteryLevel !== null ? batteryLevel + '%' : 'Unknown'}</Text>
      <Button title="Get Battery Level" onPress={fetchBatteryLevel} />
    </View>
  );
}

Lợi ích của TurboModules

Tải theo nhu cầu: Chỉ khởi tạo module khi cần thiết, giảm tải cho ứng dụng.

Truy cập trực tiếp: Loại bỏ việc serialize dữ liệu qua bridge giúp tốc độ tăng đáng kể.

Giảm kích thước app: Tối ưu bộ nhớ bằng cách giảm module không cần thiết.

3. JSI (JavaScript Interface) – Nền Tảng Cốt Lõi

JSI cho phép JavaScript gọi trực tiếp đến native code mà không qua bridge truyền thống, nâng cao tốc độ xử lý và tiết kiệm bộ nhớ.

Ví dụ: Tạo module JSI để cộng hai số trong C++

Mã C++ – tạo module JSI

// MyJSIModule.cpp
#include <jsi/jsi.h>
#include <react-native/jsi/jsilib.h>

using namespace facebook::jsi;

void install(Runtime &jsiRuntime) {
  auto addNumbers = Function::createFromHostFunction(
    jsiRuntime,
    PropNameID::forAscii(jsiRuntime, "addNumbers"),
    2,
    [](Runtime &rt, const Value &, const Value *args, size_t) -> Value {
      double a = args[0].asNumber();
      double b = args[1].asNumber();
      return Value(a + b);
    }
  );
  jsiRuntime.global().setProperty(jsiRuntime, "addNumbers", std::move(addNumbers));
}

Mã JavaScript – sử dụng hàm JSI

import React, { useEffect, useState } from 'react';
import { Text, View, Button } from 'react-native';

export default function App() {
  const [result, setResult] = useState(0);

  useEffect(() => {
    const sum = global.addNumbers(10, 20);
    setResult(sum);
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Result: {result}</Text>
      <Button title="Calculate 10 + 20" onPress={() => setResult(global.addNumbers(10, 20))} />
    </View>
  );
}

Ưu điểm của JSI

Gọi nhanh: Loại bỏ độ trễ nhờ kết nối trực tiếp với native.

Quản lý bộ nhớ tốt: Chia sẻ dữ liệu mà không cần sao chép.

Hỗ trợ nhiều engine JS: Có thể dùng Hermes, V8, và các engine khác.

Hướng Dẫn Di Chuyển Sang Kiến Trúc Mới

Bước 1: Chuẩn Bị Dự Án

Đảm bảo bạn đang dùng React Native phiên bản 0.72 trở lên.

npx react-native upgrade

Bước 2: Kích Hoạt Kiến Trúc Mới

Android: Cập nhật android/gradle.properties

newArchEnabled=true

iOS: Sửa Podfile

use_react_native!(:new_architecture => true)

Bước 3: Di Chuyển Module Native

Viết lại module native của bạn theo TurboModules và đảm bảo tuân thủ chuẩn JSI.

Bước 4: Kiểm Tra Và Tối Ưu

Test ứng dụng kỹ càng xem có lỗi hay ảnh hưởng hiệu suất. Dùng công cụ như Flipper để debug và phân tích.

Lợi Ích Của Kiến Trúc Mới

Lợi ích	Mô tả
Cải thiện hiệu suất	Khởi động nhanh, UI mượt mà hơn
Kích thước bundle nhỏ	Tải module theo nhu cầu, tiết kiệm bộ nhớ
Độ nhất quán cao	Tính nhất quán giữa iOS và Android
Dễ bảo trì	Quản lý module và code đơn giản, mở rộng dễ dàng

Nhờ những cải tiến này, React Native trở thành lựa chọn tối ưu cho các dự án mobile hiện đại.

Ví Dụ Thực Tế: Xây Dựng Module Native Đo Sức Khỏe Pin

Bước 1: Tạo Module Native (Java)

// BatteryHealthModule.java
package com.yourapp;

import android.os.BatteryManager;
import android.content.Intent;
import android.content.IntentFilter;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Promise;

public class BatteryHealthModule extends ReactContextBaseJavaModule {
  BatteryHealthModule(ReactApplicationContext context) {
    super(context);
  }

  @Override
  public String getName() {
    return "BatteryHealthModule";
  }

  @ReactMethod
  public void getBatteryHealth(Promise promise) {
    try {
      IntentFilter ifilter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);
      Intent batteryStatus = getReactApplicationContext().registerReceiver(null, ifilter);
      int health = batteryStatus.getIntExtra(BatteryManager.EXTRA_HEALTH, BatteryManager.BATTERY_HEALTH_UNKNOWN);

      String status;
      switch (health) {
        case BatteryManager.BATTERY_HEALTH_GOOD:
          status = "Good";
          break;
        case BatteryManager.BATTERY_HEALTH_OVERHEAT:
          status = "Overheat";
          break;
        case BatteryManager.BATTERY_HEALTH_DEAD:
          status = "Dead";
          break;
        case BatteryManager.BATTERY_HEALTH_OVER_VOLTAGE:
          status = "Over Voltage";
          break;
        default:
          status = "Unknown";
      }
      promise.resolve(status);
    } catch (Exception e) {
      promise.reject("Error", e);
    }
  }
}

Bước 2: Sử Dụng Module (JavaScript)

import { NativeModules, Button, Text, View } from 'react-native';
import React, { useState } from 'react';

export default function App() {
  const [batteryHealth, setBatteryHealth] = useState(null);

  const fetchBatteryHealth = async () => {
    try {
      const health = await NativeModules.BatteryHealthModule.getBatteryHealth();
      setBatteryHealth(health);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Battery Health: {batteryHealth !== null ? batteryHealth : 'Unknown'}</Text>
      <Button title="Get Battery Health" onPress={fetchBatteryHealth} />
    </View>
  );
}

Bước 3: Thử Nghiệm

Chạy app, nhấn nút "Get Battery Health" và quan sát kết quả hiển thị tình trạng pin.

Lợi ích: Truy cập native gần như tức thời, sử dụng hiệu quả bộ nhớ và khả năng mở rộng module dễ dàng.

Debug Kiến Trúc Mới Của React Native

1. Sử Dụng Flipper – Công Cụ Debug Hiệu Quả

Là công cụ chính thức hỗ trợ debug kiến trúc mới.

Hiển thị log, network, component hierarchy và profiling.

2. Kích Hoạt Debug JavaScript

Dùng Hermes Debugger hoặc Chrome Debugger.

Để bật, cập nhật metro.config.js :

module.exports = {
  transformer: {
    experimentalImportSupport: false,
    inlineRequires: true,
  },
};

3. Debug TurboModules

Kiểm tra module native trong Flipper.

Dùng Android Studio / Xcode để debug mã native.

Thêm log trong module để theo dõi.

4. Debug JSI

Dùng công cụ gdb (Android) hoặc lldb (iOS) để debug C++.

Thêm log trong code C++ để theo dõi.

5. Phân Tích Hiệu Suất

Sử dụng công cụ React DevTools trong Flipper.

Android Profiler và Instruments trên iOS.

6. Mẹo Debug Thường Gặp

Luôn xóa cache khi chuyển cấu hình: npm start --reset-cache

Build lại app khi bật kiến trúc mới.

Theo dõi log lỗi native cảnh giác với lỗi bất đồng bộ.

Kết Luận

Kiến trúc mới của React Native với Fabric, TurboModules và JSI là bước tiến đột phá giải quyết triệt để các hạn chế trước đây. Nó giúp tạo ra ứng dụng nhanh hơn, hiệu quả hơn và dễ phát triển, bảo trì. Việc hiểu rõ từng thành phần và làm quen với quá trình chuyển đổi giúp các nhà phát triển tận dụng tối đa sức mạnh của React Native trong kỷ nguyên mới.

Hãy bắt đầu cập nhật dự án của bạn theo kiến trúc mới để khai thác toàn bộ tiềm năng mà React Native mang lại!

Tham Khảo

React Native Official Documentation

Introducing the New React Native Architecture

TurboModules Deep Dive

Understanding JSI and Hermes

Facebook Engineering Blog – React Native Architecture Updates December 1, 2023