React Native ในการพัฒนาโมบายล์: คืออะไร แนวคิดหลัก และวิธีการทำงาน

พื้นฐาน (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — ส่วนขยายทางไวยากรณ์ของ JavaScript สำหรับอธิบาย UI ดูเหมือน HTML แต่ทำงานผ่าน React.createElement() นิพจน์ JSX: {variable}, {condition && <View />}, {array.map()} Functional Component — ฟังก์ชันที่คืนค่า JSX รับ props เป็นอาร์กิวเมนต์ มาตรฐานสมัยใหม่ของ React (ก่อน React 16.8 ใช้ Class Components) Hooks — ฟังก์ชันสำหรับเข้าถึงสถานะและวงจรชีวิตจาก Functional Component กฎของ Hooks: เฉพาะในระดับบนสุด เฉพาะใน Functional Components

ข้อมูลอ้างอิง Hooks

useState — สถานะภายใน useEffect — เอฟเฟกต์ข้างเคียง useContext — การเข้าถึง Context useRef — รีเฟอเรนซ์ที่เปลี่ยนแปลงได้ useCallback — การจดจำฟังก์ชัน useMemo — การจดจำค่า Custom Hooks — ตรรกะที่นำกลับมาใช้ใหม่ได้: function useDebounce(value, delay)

// Functional Component พร้อม hooks ใน React Native
import React, { useState, useEffect, useCallback } from 'react';
import {
  View, Text, FlatList,
  ActivityIndicator, SafeAreaView
} from 'react-native';

const DATA = Array.from({ length: 100 }, (_, i) => ({
  id: String(i),
  title: `Item ${i + 1}`,
}));

const Item = React.memo(({ title }) => (
  <View>
    <Text>{title}</Text>
  </View>
));

export default function App() {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => setRefreshing(false), 2000);
  }, []);

  return (
    <SafeAreaView>
      <FlatList
        data={DATA}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.id}
        refreshing={refreshing}
        onRefresh={onRefresh}
      />
    </SafeAreaView>
  );
}

Hooks (useState, useEffect, useRef, useCallback, useMemo)

useState — คืนค่า [value, setValue] setValue — แทนที่ (ไม่รวมเหมือน setState ใน Class) สำหรับออบเจ็กต์: setUser(prev => ({ ...prev, name: 'New' })) useEffect — ทำงานหลังจากเรนเดอร์ อาร์เรย์การพึ่งพา: [] — ครั้งเดียว (mount), [dep] — เมื่อ dep เปลี่ยนแปลง, undefined — ทุกครั้งที่เรนเดอร์ ฟังก์ชันทำความสะอาด — return () => {} useContext — const value = useContext(MyContext) ต้องการ Context.Provider อยู่ในลำดับขั้นที่สูงกว่า

useRef — ออบเจ็กต์ที่เปลี่ยนแปลงได้ซึ่งเก็บค่าระหว่างการเรนเดอร์ .current — การเปลี่ยนแปลง ใช้สำหรับ: การเข้าถึงองค์ประกอบเนทีฟ (ref={inputRef}), การเก็บค่าก่อนหน้า, ตัวจับเวลา useCallback — คืนค่าฟังก์ชันที่ถูกจดจำ const handlePress = useCallback(() => {}, [dep]) useMemo — คืนค่าที่ถูกจดจำ const sorted = useMemo(() => data.sort(), [data]) ใช้ useMemo สำหรับการคำนวณที่มีค่าใช้จ่ายสูง

useState — สำหรับสถานะง่าย ๆ useEffect — สำหรับการเรียก API และการสมัครรับข้อมูล useCallback/useMemo — สำหรับการเพิ่มประสิทธิภาพ IT Sectr แนะนำอย่าจดจำทุกอย่าง — เฉพาะเมื่อมีปัญหาด้านประสิทธิภาพจริง

Custom Hooks

Custom Hook — ฟังก์ชันที่ใช้ hooks ในตัว ชื่อขึ้นต้นด้วย use* ตัวอย่าง: useDebounce, useNetworkStatus, useAppState, useKeyboard Custom Hooks เป็นวิธีหลักในการนำตรรกะกลับมาใช้ใหม่ใน React Native IT Sectr แนะนำให้แยกตรรกะทางธุรกิจไปไว้ใน Custom Hooks และทำให้คอมโพเนนต์สะอาด (เฉพาะ JSX + สไตล์)

คอมโพเนนต์ (View, Text, FlatList, ScrollView, SafeAreaView)

View — คอนเทนเนอร์พื้นฐาน (คล้าย div) Text — ข้อความ (คอมโพเนนต์เดียวสำหรับข้อความ) TextInput — การป้อนข้อความ ScrollView — คอนเทนเนอร์ที่เลื่อนได้ FlatList — รายการแบบเสมือนสำหรับข้อมูลขนาดใหญ่ SectionList — FlatList พร้อมส่วน SafeAreaView — ระยะห่างอัตโนมัติจาก Safe Area (รอยบาก, แถบสถานะ) Pressable — ตัวแทนสมัยใหม่ของ TouchableOpacity useColorScheme — การตรวจจับธีมมืด/สว่าง

การเพิ่มประสิทธิภาพ FlatList

FlatList — การทำเสมือน: เฉพาะองค์ประกอบที่มองเห็น + windowSize เท่านั้นที่ถูกเรนเดอร์ การเพิ่มประสิทธิภาพ: 1) keyExtractor — คีย์ที่ไม่ซ้ำกัน, 2) getItemLayout — ความสูงคงที่ (ข้ามการวัด onLayout), 3) React.memo สำหรับ renderItem, 4) maxToRenderPerBatch (ค่าเริ่มต้น 10), 5) windowSize (ค่าเริ่มต้น 21), 6) removeClippedSubviews, 7) initialNumToRender

การนำทางใน React Native

React Navigation — สแต็กการนำทางมาตรฐาน NativeStackNavigator — แอนิเมชันเนทีฟ (push/pop) TabNavigator — แท็บด้านล่าง DrawerNavigator — เมนูด้านข้าง NavigationContainer — คอมโพเนนต์รูทของการนำทาง Deep linking — การกำหนดค่าลิงก์สำหรับลิงก์ภายนอก โฟลว์การรับรองความถูกต้อง — การนำทางแบบมีเงื่อนไข: isAuth ? AppStack : AuthStack IT Sectr แนะนำ NativeStackNavigator สำหรับหน้าจอหลักและ TabNavigator สำหรับการนำทางระดับแรก

สไตล์ (StyleSheet)

StyleSheet.create() — การสร้างสไตล์ คุณสมบัติทั้งหมดใน camelCase: backgroundColor, fontSize, marginTop Flexbox — โมเดลเค้าโครงค่าเริ่มต้น (flexDirection: 'column') ไม่มีการสืบทอด CSS, ไม่มีการสืบทอด, ไม่มีตัวเลือก Inline styles — ทำงานได้แต่ไม่แนะนำ StyleSheet.compose() — การรวมสไตล์ Platform.select — สไตล์เฉพาะแพลตฟอร์ม: Platform.OS === 'ios' ? styles.ios : styles.android SafeAreaView — การจัดการ safe area insets

Styled Components และ CSS-in-JS

Styled Components — ไลบรารีสำหรับ CSS-in-JS ใน React Native Restyle — การกำหนดธีม + สไตล์ที่ตอบสนอง NativeWind — Tailwind CSS สำหรับ React Native Unistyles — สไตล์ที่รวดเร็วด้วย CSS แบบอะตอม โหมดมืด — useColorScheme + สไตล์ไดนามิก IT Sectr แนะนำ StyleSheet.create เพื่อความเรียบง่ายและ NativeWind สำหรับโปรเจกต์ที่มีระบบการออกแบบ

แอนิเมชัน (Animated API)

Animated API — แอนิเมชันเชิงประกาศ Animated.Value — ค่าแอนิเมชัน Animated.timing — แอนิเมชันง่าย ๆ Animated.spring — แอนิเมชันสปริง Animated.View — View ที่สามารถทำแอนิเมชันได้ useNativeDriver — แอนิเมชันบนเธรดเนทีฟ (transform, opacity — รองรับ) Animated.loop — แอนิเมชันแบบวนซ้ำ LayoutAnimation — แอนิเมชันอัตโนมัติเมื่อเค้าโครงเปลี่ยน reanimated 2/3 (ไลบรารี) — ทางเลือกที่มีประสิทธิภาพมากกว่า Metro Bundler — ตัวรวม JavaScript รวม JS + ทรัพย์สินเป็นบันเดิล รองรับ Fast Refresh (Hot Reload) Hermes — เอ็นจิน JS ที่ปรับให้เหมาะสมสำหรับมือถือ: เริ่มต้นเร็ว, หน่วยความจำน้อย ค่าเริ่มต้นตั้งแต่ RN 0.70+

Gesture Handler และแอนิเมชัน

React Native Gesture Handler — การประมวลผลท่าทางแบบเนทีฟ PanGestureHandler, PinchGestureHandler, TapGestureHandler Gesture (RNGH 2.x) — API ท่าทางเชิงประกาศ Reanimated + Gesture Handler — การรวมกันสำหรับแอนิเมชัน 60fps พร้อมท่าทาง react-native-skia — การเรนเดอร์ GPU สำหรับกราฟิก 2D ที่ซับซ้อน IT Sectr แนะนำ Reanimated 3 สำหรับแอนิเมชันทั้งหมดที่มีประสิทธิภาพมากกว่า Animated API

เครือข่าย (fetch, AsyncStorage, API)

fetch — ไคลเอ็นต์ HTTP ในตัว รองรับ GET, POST, headers, body Axios — ไลบรารียอดนิยมพร้อมตัวสกัดกั้น AsyncStorage — ที่เก็บคีย์-ค่า (คล้าย UserDefaults) MMKV — ทางเลือกที่รวดเร็วสำหรับ AsyncStorage จาก WeChat react-native-keychain — การจัดเก็บโทเค็นอย่างปลอดภัย React Query (TanStack Query) — การจัดการสถานะเซิร์ฟเวอร์: การแคช, การตรวจสอบซ้ำ, การแบ่งหน้า IT Sectr แนะนำ React Query สำหรับคำขอ API และ MMKV สำหรับการจัดเก็บในเครื่อง

import AsyncStorage from '@react-native-async-storage/async-storage';

const storeToken = async (token) => {
  try {
    await AsyncStorage.setItem('@auth_token', token);
  } catch (e) {
    console.error('Storage error:', e);
  }
};

const getToken = async () => {
  try {
    return await AsyncStorage.getItem('@auth_token');
  } catch (e) {
    return null;
  }
};

Native Modules และ Turbo Modules

Native Module — สะพานเชื่อมระหว่าง JS และโค้ดเนทีฟ (Java/Kotlin สำหรับ Android, ObjC/Swift สำหรับ iOS) อนุญาตให้เรียก API เนทีฟจาก JS Turbo Modules (New Architecture) — การแทนที่ Native Modules แบบเก่า การเรียกแบบซิงโครนัส, การกำหนดชนิดผ่าน Codegen, โอเวอร์เฮดน้อยลง Fabric Renderer — เรนเดอเรอร์ใหม่พร้อมเค้าโครงแบบซิงโครนัส JSI (JavaScript Interface) — การเข้าถึงโดยตรงของ JS ไปยังออบเจ็กต์เนทีฟโดยไม่ต้องมีสะพาน IT Sectr แนะนำ Turbo Modules สำหรับโปรเจกต์ใหม่และ Native Modules สำหรับโปรเจกต์ที่มีอยู่

// โมดูลเนทีฟ Android (Kotlin)
class CalendarModule(reactContext: ReactApplicationContext) :
    ReactContextBaseJavaModule(reactContext) {

    override fun getName() = "CalendarModule"

    @ReactMethod
    fun createCalendarEvent(name: String, location: String) {
        val intent = Intent(Intent.ACTION_EDIT).apply {
            type = "vnd.android.cursor.item/event"
            putExtra(Events.TITLE, name)
            putExtra(Events.EVENT_LOCATION, location)
        }
        reactContext.startActivity(intent)
    }
}

การทดสอบ (Jest, React Native Testing Library)

Jest — ตัวรันทดสอบมาตรฐาน describe/it/expect React Native Testing Library — การทดสอบคอมโพเนนต์ render, fireEvent, waitFor screen.getByText, getByTestId — การค้นหา userEvent — การจำลองการกระทำ การทดสอบ Snapshot — toMatchSnapshot() MSW (Mock Service Worker) — การจำลอง API Detox — การทดสอบ E2E สำหรับ RN (grey-box, เนทีฟ) IT Sectr แนะนำ React Native Testing Library สำหรับคอมโพเนนต์และ Detox สำหรับสถานการณ์แบบ end-to-end

CodePush (App Center) — การอัปเดต OTA ของบันเดิล JS โดยไม่ต้องเผยแพร่ใน App Store/Google Play ใช้สำหรับ: การแก้ไขด่วน, การทดสอบ A/B, การเปลี่ยนแปลงเนื้อหา ข้อจำกัด: ไม่สามารถเปลี่ยนโค้ดเนทีฟได้ ทางเลือก: EAS Update (Expo), react-native-update IT Sectr แนะนำ CodePush สำหรับการแก้ไขเร่งด่วนและ EAS Update สำหรับโปรเจกต์ Expo

Expo — เฟรมเวิร์กสำหรับ React Native เวิร์กโฟลว์ที่มีการจัดการ — การกำหนดค่าทั้งหมดผ่าน app.json Development builds — โมดูลเนทีฟแบบกำหนดเองโดยไม่ต้อง eject Expo SDK — โมดูลในตัว: กล้อง, ไบโอเมตริกซ์, การแจ้งเตือน EAS Build — การ build บนคลาวด์ Expo Router — การกำหนดเส้นทางตามไฟล์ (คล้าย Next.js) IT Sectr แนะนำ Expo สำหรับโปรเจกต์ใหม่และ bare RN สำหรับโปรเจกต์ที่มีการปรับแต่งเนทีฟเชิงลึก