Kiến trúc của React Native hoạt động như thế nào (bridge vs kiến trúc mới)?

Question

Accepted Answer

React Native chạy code **JavaScript** và **native** phải giao tiếp với nhau. Kiến trúc gốc dùng một **bridge** bất đồng bộ; **kiến trúc mới** (JSI, TurboModule, Fabric) cho phép giao tiếp đồng bộ, nhanh hơn. Hiểu điều này làm rõ hành vi và hiệu năng của React Native.

## Kiến trúc gốc: bridge

```text
React Native chạy:
  → một JS THREAD (code React/JS của bạn) và phía NATIVE (UI, native module)
  → chúng giao tiếp qua một BRIDGE: thông điệp được SERIALIZE (thành JSON), truyền BẤT ĐỒNG BỘ,
    và deserialize ở phía bên kia
Hạn chế:
  ✗ Chỉ BẤT ĐỒNG BỘ (không thể gọi native đồng bộ)
  ✗ Chi phí SERIALIZATION; bridge có thể là BOTTLENECK khi lưu lượng nặng
  ✗ ví dụ cuộn nhanh/animation truyền dữ liệu qua bridge → giật
```

## Kiến trúc mới (JSI, TurboModule, Fabric)

```text
KIẾN TRÚC MỚI thay thế bridge:
  JSI (JavaScript Interface) → JS có thể gọi code native TRỰC TIẾP và ĐỒNG BỘ
    (không có bridge serialization) → interop JS↔native nhanh hơn nhiều
  TURBOMODULE → native module được load lazily, qua JSI (nhanh hơn, theo nhu cầu)
  FABRIC → hệ thống render mới → render UI tốt hơn, hiệu quả hơn; layout đồng bộ
  CODEGEN → interface JS↔native type-safe
→ Kết quả: hiệu năng tốt hơn, ít chi phí hơn, gọi đồng bộ, UI mượt hơn.
```

## Tại sao điều này quan trọng (về mặt thực hành)

```text
→ Giải thích các đặc điểm HIỆU NĂNG của React Native (vì sao lưu lượng bridge tốn kém)
→ Kiến trúc mới (mặc định trong RN gần đây) cải thiện hiệu năng và interop
→ Định hướng tối ưu (giảm thiểu lần vượt bridge ở kiến trúc cũ; animation native-thread)
  và hiểu cách RN thực thi
```

## Tại sao điều này quan trọng

Hiểu kiến trúc của React Native là kiến thức cấp senior có giá trị vì nó **giải thích hành vi và các đặc điểm hiệu năng của React Native**, làm sâu sắc khả năng lập luận về và tối ưu app.

Cấu trúc nền tảng — React Native chạy một **JS thread** (code của bạn) và **phía native** (UI, native module) phải **giao tiếp** — là chìa khóa để hiểu React Native hoạt động ra sao.

Hiểu **kiến trúc bridge gốc** (nơi JS và native giao tiếp qua một bridge bất đồng bộ serialize thông điệp thành JSON và truyền qua) giải thích các đặc điểm và hạn chế hiệu năng lịch sử của React Native: giao tiếp chỉ bất đồng bộ, có chi phí serialization, và bridge có thể trở thành **bottleneck khi lưu lượng nặng** (gây giật trong cuộn nhanh hoặc animation truyền dữ liệu qua) — đó là **lý do giảm thiểu lần vượt bridge và chạy animation trên native thread là các tối ưu quan trọng**, kết nối kiến trúc với lời khuyên hiệu năng thực hành.

Hiểu **kiến trúc mới** (**JSI** cho phép gọi JS↔native trực tiếp, đồng bộ mà không có bridge serialization; **TurboModule** để load native module lazily; **Fabric** để render tốt hơn; Codegen cho interface type-safe) ngày càng quan trọng khi nó đang trở thành mặc định — nó cải thiện hiệu năng, giảm chi phí, cho phép gọi đồng bộ, và tạo UI mượt hơn, đại diện cho sự tiến hóa đáng kể của React Native.

Hiểu kiến trúc này **giải thích hiệu năng của React Native** (vì sao bridge quan trọng), **định hướng tối ưu** (các thực hành theo sau từ kiến trúc), và làm rõ cách React Native thực thi — biến React Native từ một hộp đen thành một hệ thống có thể hiểu được.

Vì hiểu kiến trúc (bridge và kiến trúc mới dựa trên JSI) giải thích các đặc điểm hiệu năng của React Native, định hướng tối ưu, và phản ánh nhận thức về sự tiến hóa quan trọng của nó, và vì độ sâu này nâng người ta từ dùng React Native lên hiểu nó, hiểu kiến trúc của React Native là kiến thức cấp senior có giá trị — giải thích hành vi và hiệu năng của nó, định hướng tối ưu, và phản ánh độ sâu cùng nhận thức về sự tiến hóa nền tảng được kỳ vọng cho các vị trí React Native senior.