สถาปัตยกรรมของ React Native ทำงานอย่างไร (bridge เทียบกับสถาปัตยกรรมใหม่)?

Question

Accepted Answer

React Native รันโค้ด **JavaScript** และ **native** ที่ต้องสื่อสารกัน สถาปัตยกรรมดั้งเดิมใช้ **bridge** แบบ asynchronous ส่วน **สถาปัตยกรรมใหม่** (JSI, TurboModules, Fabric) ช่วยให้การสื่อสารเร็วขึ้นและเป็นแบบ synchronous การเข้าใจสิ่งนี้ช่วยให้เข้าใจพฤติกรรมและประสิทธิภาพของ React Native ชัดเจนขึ้น

## สถาปัตยกรรมดั้งเดิม: bridge

```text
React Native runs:
  → a JS THREAD (your React/JS code) and the NATIVE side (UI, native modules)
  → they communicate over a BRIDGE: messages are SERIALIZED (to JSON), passed ASYNC,
    and deserialized on the other side
Limitations:
  ✗ ASYNCHRONOUS only (can't call native synchronously)
  ✗ SERIALIZATION overhead; the bridge can be a BOTTLENECK with heavy traffic
  ✗ e.g. fast scrolling/animations passing data over the bridge → jank
```

## สถาปัตยกรรมใหม่ (JSI, TurboModules, Fabric)

```text
The NEW ARCHITECTURE replaces the bridge:
  JSI (JavaScript Interface) → JS can call native code DIRECTLY and SYNCHRONOUSLY
    (no serialization bridge) → much faster JS↔native interop
  TURBOMODULES → native modules loaded lazily, via JSI (faster, on-demand)
  FABRIC → the new rendering system → better, more efficient UI rendering; sync layout
  CODEGEN → type-safe JS↔native interfaces
→ Result: better performance, less overhead, synchronous calls, smoother UI.
```

## ทำไมจึงสำคัญ (ในทางปฏิบัติ)

```text
→ Explains React Native's PERFORMANCE characteristics (why bridge traffic was costly)
→ The new architecture (default in recent RN) improves performance and interop
→ Informs optimization (minimize bridge crossings on the old architecture; native-thread
  animations) and understanding of how RN executes
```

## ทำไมจึงสำคัญ

การเข้าใจสถาปัตยกรรมของ React Native เป็นความรู้ระดับ senior ที่มีคุณค่าเพราะมัน **อธิบายพฤติกรรมและลักษณะด้านประสิทธิภาพของ React Native** ช่วยเพิ่มความสามารถในการวิเคราะห์และปรับแต่งแอป

โครงสร้างพื้นฐาน — React Native รัน **JS thread** (โค้ดของคุณ) และ **ฝั่ง native** (UI, native module) ที่ต้อง **สื่อสาร** กัน — เป็นกุญแจสำคัญในการเข้าใจวิธีที่ React Native ทำงาน

การเข้าใจ **สถาปัตยกรรม bridge ดั้งเดิม** (ที่ JS และ native สื่อสารผ่าน bridge แบบ asynchronous ซึ่ง serialize ข้อความเป็น JSON และส่งผ่าน) อธิบายลักษณะด้านประสิทธิภาพและข้อจำกัดในอดีตของ React Native: การสื่อสารเป็นแบบ asynchronous เท่านั้น มี serialization overhead และ bridge อาจกลายเป็น **bottleneck เมื่อมี traffic หนัก** (ก่อให้เกิดการกระตุกในการ scroll เร็วหรือแอนิเมชันที่ส่งข้อมูลผ่าน) — ซึ่งเป็น **เหตุผลว่าทำไมการลดการข้าม bridge และการรันแอนิเมชันบน native thread จึงเป็นการปรับแต่งที่สำคัญ** เชื่อมโยงสถาปัตยกรรมเข้ากับคำแนะนำด้านประสิทธิภาพเชิงปฏิบัติ

การเข้าใจ **สถาปัตยกรรมใหม่** (**JSI** ที่ช่วยให้เรียก JS↔native โดยตรงและ synchronous โดยไม่ผ่าน serialization bridge; **TurboModules** สำหรับการโหลด native module แบบ lazy; **Fabric** สำหรับการ render ที่ดีขึ้น; Codegen สำหรับ interface ที่ type-safe) สำคัญมากขึ้นเรื่อย ๆ เนื่องจากกำลังกลายเป็นค่าเริ่มต้น — มันปรับปรุงประสิทธิภาพ ลด overhead เปิดให้เรียกแบบ synchronous และสร้าง UI ที่ลื่นไหลขึ้น แสดงถึงวิวัฒนาการที่สำคัญของ React Native

การเข้าใจสถาปัตยกรรมนี้ **อธิบายประสิทธิภาพของ React Native** (ทำไม bridge จึงสำคัญ) **ชี้นำการปรับแต่ง** (แนวปฏิบัติที่ตามมาจากสถาปัตยกรรม) และทำให้ชัดเจนว่า React Native ทำงานอย่างไร — เปลี่ยน React Native จากกล่องดำให้เป็นระบบที่เข้าใจได้

เนื่องจากการเข้าใจสถาปัตยกรรม (bridge และสถาปัตยกรรมใหม่ที่ใช้ JSI) อธิบายลักษณะด้านประสิทธิภาพของ React Native ชี้นำการปรับแต่ง และสะท้อนความตระหนักในวิวัฒนาการที่สำคัญ และเนื่องจากความเข้าใจเชิงลึกนี้ยกระดับจากการใช้ React Native ไปสู่การเข้าใจมัน การเข้าใจสถาปัตยกรรมของ React Native จึงเป็นความรู้ระดับ senior ที่มีคุณค่า — อธิบายพฤติกรรมและประสิทธิภาพของมัน ชี้นำการปรับแต่ง และสะท้อนความลึกและความตระหนักในวิวัฒนาการของแพลตฟอร์มที่คาดหวังสำหรับตำแหน่ง React Native ระดับ senior