Bagaimanakah seni bina React Native berfungsi (bridge berbanding seni bina baharu)?

Question

Accepted Answer

React Native menjalankan kod **JavaScript** dan **native** yang mesti berkomunikasi. Seni bina asal menggunakan **bridge** yang asynchronous; **seni bina baharu** (JSI, TurboModules, Fabric) membolehkan komunikasi yang lebih pantas dan synchronous. Memahami ini menjelaskan tingkah laku dan prestasi React Native.

## Seni bina asal: bridge

```text
React Native menjalankan:
  → satu JS THREAD (kod React/JS anda) dan bahagian NATIVE (UI, native modules)
  → mereka berkomunikasi melalui BRIDGE: mesej di-SERIALIZED (ke JSON), dihantar ASYNC,
    dan deserialized di bahagian sebelah lain
Kekangan:
  ✗ ASYNCHRONOUS sahaja (tidak boleh memanggil native secara synchronous)
  ✗ Overhead SERIALIZATION; bridge boleh menjadi BOTTLENECK dengan trafik berat
  ✗ cth. scrolling/animasi pantas yang melepasi data melalui bridge → jank
```

## Seni bina baharu (JSI, TurboModules, Fabric)

```text
SENI BINA BAHARU menggantikan bridge:
  JSI (JavaScript Interface) → JS boleh memanggil kod native SECARA LANGSUNG dan SYNCHRONOUS
    (tiada serialization bridge) → interop JS↔native yang jauh lebih pantas
  TURBOMODULES → native modules dimuatkan secara lazy, melalui JSI (lebih pantas, atas permintaan)
  FABRIC → sistem rendering baharu → rendering UI yang lebih baik dan cekap; sync layout
  CODEGEN → antara muka JS↔native yang type-safe
→ Hasil: prestasi lebih baik, kurang overhead, panggilan synchronous, UI lebih lancar.
```

## Mengapa ia penting (secara praktikal)

```text
→ Menjelaskan ciri PRESTASI React Native (mengapa trafik bridge mahal)
→ Seni bina baharu (lalai dalam RN terkini) meningkatkan prestasi dan interop
→ Memaklumkan pengoptimuman (minimumkan lintasan bridge pada seni bina lama; animasi
  native-thread) dan kefahaman tentang cara RN melaksanakan
```

## Mengapa ia penting

Memahami seni bina React Native ialah pengetahuan peringkat senior yang berharga kerana ia **menjelaskan tingkah laku dan ciri prestasi React Native**, mendalamkan keupayaan untuk menaakul dan mengoptimumkan aplikasi.

Struktur asas — React Native menjalankan **JS thread** (kod anda) dan **bahagian native** (UI, native modules) yang mesti **berkomunikasi** — ialah kunci untuk memahami cara React Native berfungsi.

Memahami **seni bina bridge asal** (di mana JS dan native berkomunikasi melalui bridge asynchronous yang serialize mesej ke JSON dan melepasinya) menjelaskan ciri prestasi sejarah dan kekangan React Native: komunikasi adalah asynchronous-sahaja, mempunyai overhead serialization, dan bridge boleh menjadi **bottleneck dengan trafik berat** (menyebabkan jank dalam scrolling pantas atau animasi yang melepasi data) — itulah **sebab meminimumkan lintasan bridge dan menjalankan animasi pada native thread adalah pengoptimuman penting**, menghubungkan seni bina dengan nasihat prestasi praktikal.

Memahami **seni bina baharu** (**JSI** yang membolehkan panggilan JS↔native langsung dan synchronous tanpa serialization bridge; **TurboModules** untuk pemuatan native module yang lazy; **Fabric** untuk rendering yang lebih baik; Codegen untuk antara muka type-safe) semakin penting kerana ia menjadi lalai — ia meningkatkan prestasi, mengurangkan overhead, membolehkan panggilan synchronous, dan menghasilkan UI yang lebih lancar, mewakili evolusi penting React Native.

Memahami seni bina ini **menjelaskan prestasi React Native** (mengapa bridge penting), **memaklumkan pengoptimuman** (amalan yang berikutan daripada seni bina), dan menjelaskan cara React Native melaksanakan — menukar React Native daripada black box menjadi sistem yang boleh difahami.

Memandangkan memahami seni bina (bridge dan seni bina baharu berasaskan JSI) menjelaskan ciri prestasi React Native, memaklumkan pengoptimuman, dan mencerminkan kesedaran tentang evolusinya yang penting, dan memandangkan kedalaman ini mengangkat seseorang daripada menggunakan React Native kepada memahaminya, memahami seni bina React Native ialah pengetahuan peringkat senior yang berharga — menjelaskan tingkah laku dan prestasinya, memaklumkan pengoptimuman, dan mencerminkan kedalaman serta kesedaran evolusi platform yang dijangka untuk peranan React Native senior.