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 — مدیریت حاشیه‌های ناحیه امن.

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 را برای سناریوهای سرتاسری توصیه می‌کند.

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 — ساخت ابری. Expo Router — مسیریابی مبتنی بر فایل (مشابه Next.js). IT Sectr Expo را برای پروژه‌های جدید و bare RN را برای پروژه‌های با سفارشی‌سازی بومی عمیق توصیه می‌کند.