React Native: คืออะไร Bridge ทำงานอย่างไร และสภาพแวดล้อม JavaScript

React Native คืออะไร

React Native คือเฟรมเวิร์กที่สร้างโดยทีม Facebook (ปัจจุบันคือ Meta) และเผยแพร่เป็นโอเพนซอร์สในปี 2015 แตกต่างจากแนวทางไฮบริด (Cordova, Ionic) ตรงที่ React Native ไม่ใช้ WebView แต่คอมโพเนนต์ JavaScript จะถูกแมปไปยังองค์ประกอบ UI พื้นเมือง: View → UIView / android.view.View, Text → UILabel / TextView, ScrollView → UIScrollView / ScrollView

เวอร์ชันแรกของ React Native รองรับเฉพาะ iOS การรองรับ Android มาถึงในปี 2016 เวอร์ชัน 0.60 (2019) นำเสนอ Autolinking — การเชื่อมโยงการพึ่งพาพื้นเมืองโดยอัตโนมัติ React Native 0.68 (2022) รวมสถาปัตยกรรมใหม่ Fabric + TurboModules เวอร์ชันเสถียรปัจจุบัน 0.74 (2024) ได้ถูกย้ายไปยัง New Architecture อย่างสมบูรณ์พร้อมการรองรับ Yoga 3.0 สำหรับเค้าโครง Flexbox

ตาม Statista 2024 React Native ถูกใช้ใน 38% ของโปรเจกต์ข้ามแพลตฟอร์ม เฟรมเวิร์กนี้ถูกใช้โดย Discord, Instagram, Shopify, Pinterest, Skype และ Uber Eats Meta ใช้ React Native ใน Facebook และ Instagram — แอปมือถือหลักที่มีผู้ใช้งาน 2 พันล้านคน

ประวัติและวิวัฒนาการของ React Native

React Native ถูกประกาศในงาน React.js Conf เมื่อเดือนมกราคม 2015 แนวคิดคือการนำกระบวนทัศน์แบบประกาศ (declarative) ของ React จากเว็บมาสู่แพลตฟอร์มมือถือ คอมมิตแรกใน Repository ปรากฏในปี 2013 ในฐานะโปรเจกต์ภายในของ Facebook สำหรับสร้างแอป Facebook Groups บน iOS

เวอร์ชัน 0.70 (2022) นำเสนอ Hermes เป็นเอนจิน JavaScript เริ่มต้น Hermes เป็นเอนจินที่คอมไพล์ล่วงหน้า (AOT) ซึ่งปรับให้เหมาะสมสำหรับอุปกรณ์มือถือ มันลดเวลาเริ่มต้นแอปลง 50% และลดขนาด APK ลง 30% เมื่อเทียบกับ JavaScriptCore Hermes รองรับ ES6 และบางส่วนของ ES2020

ความแตกต่างระหว่าง React Native และ React Web

React Web เรนเดอร์คอมโพเนนต์ไปยังองค์ประกอบ DOM (div, span, p) ผ่าน ReactDOM React Native เรนเดอร์ไปยังคอมโพเนนต์พื้นเมืองของแพลตฟอร์ม แทน <div> ให้ใช้ <View> แทน <span> ให้ใช้ <Text> สไตล์ถูกกำหนดผ่าน StyleSheet.create() ซึ่งแปลเป็นคุณสมบัติ CSS ของแพลตฟอร์ม Flexbox เปิดใช้งานโดยค่าเริ่มต้นผ่านเอนจิน Yoga

การนำทาง ใน React Native แตกต่างจากเว็บ แทนที่ react-router-dom จะใช้ React Navigation — ไลบรารีพื้นเมืองที่รองรับตัวนำทาง Stack, Tab และ Drawer React Navigation 6.x ใช้แอนิเมชันพื้นเมือง (useNativeDriver) และการรวม Deep Links สำหรับการนำทางหน้าจอแบบพื้นเมืองด้วย UINavigationController ของ iOS และ Fragment ของ Android จะใช้ไลบรารี react-native-navigation โดย Wix

สถาปัตยกรรม React Native

สถาปัตยกรรม React Native แบบดั้งเดิมสร้างขึ้นรอบ Bridge — ช่องทาง JSON แบบอะซิงโครนัสระหว่างสภาพแวดล้อม JavaScript และโค้ดพื้นเมือง ตั้งแต่เวอร์ชัน 0.68 Meta ได้นำเสนอ New Architecture ซึ่งแทนที่ Bridge ด้วย JSI (JavaScript Interface) และ Fabric มาดูทั้งสองโมเดลกัน

Bridge และ Fabric

Bridge คือโปรโตคอล JSON ที่ถูกทำให้เป็นอนุกรมซึ่งทำงานบนหลายเธรด: JS Thread (การตีความโค้ด React), Main Thread (UI) และ Native Modules Thread (API) ทุกการโต้ตอบระหว่าง JS และโค้ดพื้นเมืองต้องผ่านการทำให้เป็นอนุกรมและดีซีเรียลไลซ์ของอ็อบเจ็กต์ ซึ่งสร้างความล่าช้าเมื่อเรียกใช้บ่อยๆ เมื่อเลื่อนรายการ 1000 รายการ Bridge สร้างข้อความ JSON สูงถึง 10,000 ข้อความต่อวินาที

Fabric คือระบบเรนเดอร์ใหม่ใน React Native แทนที่ Bridge Fabric ใช้ Shadow Tree ใน C++ ที่ซิงโครไนซ์กับเธรด UI ผ่าน JSI ซึ่งกำจัดการทำซีเรียลไลซ์ JSON: โค้ด C++ พื้นเมืองเรียกฟังก์ชันในสภาพแวดล้อม JavaScript โดยตรงและในทางกลับกัน Fabric ลดความหน่วงในการเรนเดอร์จาก 16 ms (Bridge) เหลือ 2–4 ms

TurboModules เป็นส่วนที่สองของ New Architecture ในโมเดลเก่า โมดูลพื้นเมืองทั้งหมดถูกโหลดเมื่อเริ่มต้นแอป TurboModules โหลดโมดูลแบบขี้เกียจ (lazy loading) — เฉพาะเมื่อโค้ด JS ร้องขอครั้งแรก ซึ่งลดเวลาเริ่มต้นเย็นลง 40% ในแอปที่มีโมดูลพื้นเมือง 20+ โมดูล

ตัวอย่างแอปพลิเคชัน 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;

โมดูลพื้นเมือง

โมดูลพื้นเมือง คือกลไกสำหรับเรียก API แพลตฟอร์มจาก JavaScript หากฟังก์ชันการทำงานไม่ครอบคลุมโดยคอมโพเนนต์ React Native มาตรฐาน (กล้อง, Bluetooth, ไบโอเมตริกซ์) นักพัฒนาจะเขียนโมดูลใน Swift/Kotlin และลงทะเบียนผ่าน RCTBridgeModule หรือ TurboModule ฟังก์ชันพื้นเมืองถูกเรียกจาก JS ผ่าน NativeModules.CameraModule.takePhoto()

React Native มี โมดูลพื้นเมืองพร้อมใช้ สำหรับการเข้าถึงมาตรวัดความเร่ง (react-native-sensors), ตำแหน่งทางภูมิศาสตร์ (@react-native-community/geolocation), ไบโอเมตริกซ์ (react-native-biometrics) และการแจ้งเตือนในเครื่อง (@notifee/react-native) สำหรับสถานการณ์ที่กำหนดเอง Expo มี Expo Modules API — อินเทอร์เฟซที่ง่ายกว่าสำหรับสร้างโมดูลพื้นเมืองโดยไม่ต้องใช้ Xcode หรือ Android Studio

ข้อดีของ React Native

ชุมชนขนาดใหญ่ — React Native มีชุมชนใหญ่ที่สุดในบรรดาเฟรมเวิร์กข้ามแพลตฟอร์ม บน GitHub โปรเจกต์มี 117,000+ ดาวและ 1800+ ผู้มีส่วนร่วม npm ดาวน์โหลด react-native 3 ล้าน+ ครั้งต่อสัปดาห์ คำถามเกี่ยวกับ React Native คิดเป็น 5% ของคำถามทั้งหมดบน Stack Overflow ในส่วนการพัฒนามือถือ

ระบบนิเวศ JavaScript — นักพัฒนา React ใช้เครื่องมือเดียวกันกับบนเว็บ: npm, Babel, ESLint, Prettier, Jest, TypeScript ตรรกะทางธุรกิจสามารถนำมาใช้ซ้ำระหว่างเวอร์ชันเว็บ (React) และแอปมือถือ (React Native) ไลบรารีอย่าง Redux, Zustand, React Query และ React Hook Form ทำงานบนทั้งสองแพลตฟอร์มโดยไม่ต้องเปลี่ยนแปลง

Expo คือ SDK และชุดเครื่องมือที่ทำให้การพัฒนา React Native ง่ายขึ้น Expo มีโมดูลพร้อมใช้ (กล้อง, การแจ้งเตือน, แผนที่, OAuth), การ build บนคลาวด์ (EAS Build) และการอัปเดต OTA (EAS Update) Expo Go อนุญาตให้เรียกใช้แอปบนอุปกรณ์จริงโดยไม่ต้องใช้ Xcode หรือ Android Studio ตามข้อมูล Expo 2024, 70% ของโปรเจกต์ React Native ใหม่ใช้ Expo

การอัปเดต OTA — ฟีเจอร์ที่พร้อมใช้งานผ่าน Expo Update และ CodePush (Microsoft) นักพัฒนาสามารถส่งการอัปเดต JavaScript Bundle ไปยังผู้ใช้โดยตรงโดยไม่ต้องผ่านการตรวจสอบ App Store หรือ Google Play ซึ่งช่วยเร่งการแก้ไขบั๊กสำคัญจาก 2–5 วัน (รอการตรวจสอบ) เหลือ 1–2 ชั่วโมง

การรองรับ TypeScript รวมอยู่ในค่าเริ่มต้นตั้งแต่ React Native 0.71 เทมเพลตโปรเจกต์ประกอบด้วย tsconfig.json, ชนิดสำหรับคอมโพเนนต์ทั้งหมด และการรองรับโหมดเข้มงวด Flow (การพิมพ์แบบสแตติกโดย Facebook) ก็รองรับเช่นกัน แต่ Meta แนะนำ TypeScript อย่างเป็นทางการ เทมเพลต TypeScript คิดเป็น 85% ของโปรเจกต์ใหม่ตามการสำรวจ State of React Native 2024

ระบบนิเวศและไลบรารียอดนิยม

npm คือรีจิสทรีแพ็คเกจหลักสำหรับ React Native การค้นหาไลบรารีถูกกรองด้วยคำสำคัญ react-native การติดตั้งใช้ npm install หรือ yarn add React Native CLI จะเชื่อมโยงการพึ่งพาพื้นเมืองโดยอัตโนมัติ (ตั้งแต่เวอร์ชัน 0.60) สำหรับโปรเจกต์ Expo การติดตั้งจะถูกจัดการผ่าน expo install ซึ่งเลือกเวอร์ชันไลบรารีที่เข้ากันได้

ไลบรารีสำคัญ

@react-navigation/native — มาตรฐานโดยพฤตินัยสำหรับการนำทางใน React Native ไลบรารีประกอบด้วย Stack Navigator (การเปลี่ยนภาพแบบแอนิเมชัน), Tab Navigator (เมนูด้านล่างสำหรับ iOS/Android), Drawer Navigator (เมนูด้านข้าง) และ Material Top Tab React Navigation 7.x (2024) นำเสนอการกำหนดค่าเส้นทางแบบสแตติกและการรองรับ React 18 อย่างสมบูรณ์ด้วย useSyncExternalStore

react-native-reanimated — ไลบรารีสำหรับแอนิเมชันประสิทธิภาพสูง Reanimated 3.x เรียกใช้แอนิเมชันในเธรด UI (worklet) โดยข้ามเธรด JS ซึ่งรับประกัน 60 FPS แม้เมื่อทำแอนิเมชันกับ 100+ องค์ประกอบ useSharedValue, useAnimatedStyle และ withSpring แทนที่ Animated API จากไลบรารีมาตรฐาน Reanimated จัดการท่าทางสัมผัสผ่าน react-native-gesture-handler

@tanstack/react-query — ไลบรารีสำหรับการจัดการสถานะเซิร์ฟเวอร์ React Query แคชการตอบสนองของ API, ดึงข้อมูลอีกครั้งโดยอัตโนมัติเมื่อเครือข่ายเปลี่ยนแปลง (refetchOnReconnect) และรองรับการแบ่งหน้าด้วย useInfiniteQuery เวอร์ชัน 5.x รวมถึงการอัปเดตแบบมองโลกในแง่ดีสำหรับ UX — อินเทอร์เฟซอัปเดตก่อนที่จะได้รับการตอบสนองจากเซิร์ฟเวอร์ จากนั้นปรับเปลี่ยน