React Native trong phát triển di động: nó là gì, các khái niệm chính và cách hoạt động

Cơ bản (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — phần mở rộng cú pháp của JavaScript để mô tả UI. Trông giống HTML nhưng hoạt động thông qua React.createElement(). Biểu thức JSX: {variable}, {condition && <View />}, {array.map()}. Functional Component — một hàm trả về JSX. Nhận props làm đối số. Tiêu chuẩn hiện đại của React (trước React 16.8, Class Components được sử dụng). Hooks — các hàm để truy cập trạng thái và vòng đời từ Functional Component. Quy tắc Hooks: chỉ ở cấp cao nhất, chỉ trong Functional Components.

Tham khảo Hooks

useState — trạng thái cục bộ. useEffect — hiệu ứng phụ. useContext — truy cập Context. useRef — tham chiếu có thể thay đổi. useCallback — ghi nhớ hàm. useMemo — ghi nhớ giá trị. Custom Hooks — logic có thể tái sử dụng: function useDebounce(value, delay).

// Functional Component với hooks trong 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 — trả về [value, setValue]. setValue — thay thế (không hợp nhất như setState trong Class). Đối với đối tượng: setUser(prev => ({ ...prev, name: 'New' })). useEffect — chạy sau khi kết xuất. Mảng phụ thuộc: [] — một lần (gắn kết), [dep] — khi dep thay đổi, undefined — mỗi lần kết xuất. Hàm dọn dẹp — return () => {}. useContext — const value = useContext(MyContext). Yêu cầu Context.Provider cao hơn trong cây.

useRef — đối tượng có thể thay đổi giữ giá trị giữa các lần kết xuất. .current — thay đổi. Được sử dụng cho: truy cập phần tử gốc (ref={inputRef}), lưu trữ giá trị trước đó, bộ đếm thời gian. useCallback — trả về một hàm đã được ghi nhớ. const handlePress = useCallback(() => {}, [dep]). useMemo — trả về một giá trị đã được ghi nhớ. const sorted = useMemo(() => data.sort(), [data]). Sử dụng useMemo cho các tính toán tốn kém.

useState — cho trạng thái đơn giản. useEffect — cho các cuộc gọi API và đăng ký. useCallback/useMemo — để tối ưu hóa. IT Sectr khuyến nghị không ghi nhớ mọi thứ — chỉ khi có vấn đề về hiệu suất thực sự.

Custom Hooks

Custom Hook — một hàm sử dụng hooks tích hợp. Tên bắt đầu bằng use*. Ví dụ: useDebounce, useNetworkStatus, useAppState, useKeyboard. Custom Hooks là cách chính để tái sử dụng logic trong React Native. IT Sectr khuyến nghị trích xuất logic kinh doanh vào Custom Hooks và giữ cho các thành phần sạch sẽ (chỉ JSX + kiểu).

Thành phần (View, Text, FlatList, ScrollView, SafeAreaView)

View — vùng chứa cơ bản (tương tự div). Text — văn bản (thành phần duy nhất cho văn bản). TextInput — nhập văn bản. ScrollView — vùng chứa có thể cuộn. FlatList — danh sách ảo hóa cho dữ liệu lớn. SectionList — FlatList với các phần. SafeAreaView — đệm tự động từ Safe Area (notch, thanh trạng thái). Pressable — thay thế hiện đại cho TouchableOpacity. useColorScheme — phát hiện chủ đề tối/sáng.

Tối ưu hóa FlatList

FlatList — ảo hóa: chỉ hiển thị các mục nhìn thấy + windowSize. Tối ưu hóa: 1) keyExtractor — khóa duy nhất, 2) getItemLayout — chiều cao cố định (bỏ qua đo onLayout), 3) React.memo cho renderItem, 4) maxToRenderPerBatch (mặc định 10), 5) windowSize (mặc định 21), 6) removeClippedSubviews, 7) initialNumToRender.

Điều hướng trong React Native

React Navigation — ngăn xếp điều hướng tiêu chuẩn. NativeStackNavigator — hoạt ảnh gốc (push/pop). TabNavigator — tab dưới cùng. DrawerNavigator — menu bên. NavigationContainer — thành phần gốc của điều hướng. Deep linking — cấu hình liên kết cho liên kết ngoài. Luồng xác thực — điều hướng có điều kiện: isAuth ? AppStack : AuthStack. IT Sectr khuyến nghị NativeStackNavigator cho màn hình chính và TabNavigator cho điều hướng cấp đầu tiên.

Kiểu (StyleSheet)

StyleSheet.create() — tạo kiểu. Tất cả thuộc tính ở dạng camelCase: backgroundColor, fontSize, marginTop. Flexbox — mô hình bố cục mặc định (flexDirection: 'column'). Không có tầng CSS, không có kế thừa, không có bộ chọn. Inline styles — hoạt động nhưng không được khuyến khích. StyleSheet.compose() — kết hợp kiểu. Platform.select — kiểu theo nền tảng: Platform.OS === 'ios' ? styles.ios : styles.android. SafeAreaView — quản lý phần chèn safe area.

Styled Components và CSS-in-JS

Styled Components — thư viện cho CSS-in-JS trong React Native. Restyle — chủ đề + kiểu phản hồi. NativeWind — Tailwind CSS cho React Native. Unistyles — kiểu nhanh với CSS nguyên tử. Chế độ tối — useColorScheme + kiểu động. IT Sectr khuyến nghị StyleSheet.create vì tính đơn giản và NativeWind cho các dự án có hệ thống thiết kế.

Hoạt ảnh (Animated API)

Animated API — hoạt ảnh khai báo. Animated.Value — giá trị hoạt ảnh. Animated.timing — hoạt ảnh đơn giản. Animated.spring — hoạt ảnh lò xo. Animated.View — View có thể tạo hoạt ảnh. useNativeDriver — hoạt ảnh trên luồng gốc (transform, opacity — được hỗ trợ). Animated.loop — hoạt ảnh lặp. LayoutAnimation — hoạt ảnh tự động khi thay đổi bố cục. reanimated 2/3 (thư viện) — thay thế hiệu suất cao hơn. Metro Bundler — trình đóng gói JavaScript. Đóng gói JS + tài sản thành một gói. Hỗ trợ Fast Refresh (Hot Reload). Hermes — công cụ JS tối ưu cho di động: khởi động nhanh, ít bộ nhớ. Mặc định từ RN 0.70+.

Gesture Handler và hoạt ảnh

React Native Gesture Handler — xử lý cử chỉ gốc. PanGestureHandler, PinchGestureHandler, TapGestureHandler. Gesture (RNGH 2.x) — API cử chỉ khai báo. Reanimated + Gesture Handler — kết hợp cho hoạt ảnh 60fps với cử chỉ. react-native-skia — kết xuất GPU cho đồ họa 2D phức tạp. IT Sectr khuyến nghị Reanimated 3 cho tất cả các hoạt ảnh hiệu suất cao hơn Animated API.

Mạng (fetch, AsyncStorage, API)

fetch — trình khách HTTP tích hợp. Hỗ trợ GET, POST, headers, body. Axios — thư viện phổ biến với bộ chặn. AsyncStorage — lưu trữ khóa-giá trị (tương tự UserDefaults). MMKV — thay thế nhanh cho AsyncStorage từ WeChat. react-native-keychain — lưu trữ mã thông báo an toàn. React Query (TanStack Query) — quản lý trạng thái máy chủ: lưu cache, xác thực lại, phân trang. IT Sectr khuyến nghị React Query cho các yêu cầu API và MMKV cho lưu trữ cục bộ.

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 và Turbo Modules

Native Module — cầu nối giữa JS và mã gốc (Java/Kotlin cho Android, ObjC/Swift cho iOS). Cho phép gọi API gốc từ JS. Turbo Modules (New Architecture) — thay thế cho Native Modules cũ. Gọi đồng bộ, gõ qua Codegen, ít chi phí hơn. Fabric Renderer — trình kết xuất mới với bố cục đồng bộ. JSI (JavaScript Interface) — truy cập trực tiếp JS vào đối tượng gốc mà không cần cầu nối. IT Sectr khuyến nghị Turbo Modules cho dự án mới và Native Modules cho dự án hiện có.

// Mô-đun gốc 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)
    }
}

Kiểm thử (Jest, React Native Testing Library)

Jest — trình chạy kiểm thử tiêu chuẩn. describe/it/expect. React Native Testing Library — kiểm thử thành phần. render, fireEvent, waitFor. screen.getByText, getByTestId — tìm kiếm. userEvent — mô phỏng hành động. Kiểm thử Snapshot — toMatchSnapshot(). MSW (Mock Service Worker) — giả lập API. Detox — kiểm thử E2E cho RN (grey-box, gốc). IT Sectr khuyến nghị React Native Testing Library cho các thành phần và Detox cho các kịch bản đầu cuối.

CodePush (App Center) — cập nhật OTA gói JS mà không cần xuất bản lên App Store/Google Play. Được sử dụng cho: sửa lỗi nóng, kiểm thử A/B, thay đổi nội dung. Hạn chế: không thể thay đổi mã gốc. Thay thế: EAS Update (Expo), react-native-update. IT Sectr khuyến nghị CodePush cho sửa lỗi khẩn cấp và EAS Update cho dự án Expo.

Expo — framework cho React Native. Quy trình được quản lý — tất cả cấu hình qua app.json. Development builds — mô-đun gốc tùy chỉnh không cần eject. Expo SDK — mô-đun tích hợp: máy ảnh, sinh trắc học, thông báo. EAS Build — xây dựng đám mây. Expo Router — định tuyến dựa trên tệp (tương tự Next.js). IT Sectr khuyến nghị Expo cho dự án mới và bare RN cho dự án có tùy chỉnh gốc sâu.