تحسين أداء React Native في 2024: دليل شامل

# مشروع جديد مع المعمارية الجديدة
npx react-native@latest init MyApp --template react-native-template-typescript

# ترحيل مشروع قائم
cd ios && RCT_NEW_ARCH_ENABLED=1 pod install
cd android && ./gradlew clean && ./gradlew assembleDebug -PnewArchEnabled=true

import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  getMemoryInfo(): Promise<{
    totalMemory: number;
    freeMemory: number;
    usedMemory: number;
  }>;
  
  optimizeBundle(options: {
    enableHermes: boolean;
    minify: boolean;
  }): Promise<boolean>;
}

export default TurboModuleRegistry.getEnforcing<Spec>('PerformanceModule');

import { useEffect, useState } from 'react';
import PerformanceModule from '../specs/NativePerformanceModule';

export const usePerformanceMonitoring = () => {
  const [memoryInfo, setMemoryInfo] = useState(null);
  
  useEffect(() => {
    const interval = setInterval(async () => {
      try {
        const info = await PerformanceModule.getMemoryInfo();
        setMemoryInfo(info);
        
        // تنبيه إذا تجاوز استخدام الذاكرة 80%
        if (info.usedMemory / info.totalMemory > 0.8) {
          console.warn('High memory usage detected');
        }
      } catch (error) {
        console.error('Performance monitoring error:', error);
      }
    }, 5000);
    
    return () => clearInterval(interval);
  }, []);
  
  return { memoryInfo };
};

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

// تحسينات الإنتاج
config.transformer.minifierConfig = {
  keep_fnames: false,
  mangle: {
    keep_fnames: false,
  },
  output: {
    comments: false,
  },
};

// Tree Shaking مكثف
config.resolver.platforms = ['native', 'android', 'ios'];
config.resolver.assetExts.push('bin');

// تحسين الصور
config.transformer.assetPlugins = ['expo-asset/tools/hashAssetFiles'];

module.exports = config;

import React, { Suspense, lazy } from 'react';
import { ActivityIndicator, View } from 'react-native';

const LazyScreen = lazy(() => import('../screens/HeavyScreen'));

export const OptimizedNavigator = () => (
  <Suspense 
    fallback={
      <View style={{ flex: 1, justifyContent: 'center'}>
        <ActivityIndicator size="large" />
      </View>
    }
  >
    <LazyScreen />
  </Suspense>
);

// Preload مشروط
export const preloadHeavyScreen = () => {
  if (__DEV__) return;
  import('../screens/HeavyScreen');
};

export class PerformanceProfiler {
  private static instance: PerformanceProfiler;
  private marks: Map<string, number> = new Map();
  
  static getInstance(): PerformanceProfiler {
    if (!this.instance) {
      this.instance = new PerformanceProfiler();
    }
    return this.instance;
  }
  
  mark(name: string): void {
    this.marks.set(name, Date.now());
  }
  
  measure(startMark: string, endMark: string): number {
    const start = this.marks.get(startMark);
    const end = this.marks.get(endMark);
    
    if (!start || !end) {
      throw new Error('Marks not found');
    }
    
    return end - start;
  }
  
  // تكامل مع Flipper
  reportToFlipper(measurement: string, duration: number): void {
    if (__DEV__) {
      console.log('[Performance] ' + measurement + ': ' + duration + 'ms');
    }
  }
}

import { create } from 'zustand';
import { subscribeWithSelector } from 'zustand/middleware';

interface AppState {
  user: User | null;
  posts: Post[];
  loading: boolean;
}

export const useAppStore = create<AppState>()(
  subscribeWithSelector((set, get) => ({
    user: null,
    posts: [],
    loading: false,
    
    // إجراءات محسّنة
    setUser: (user: User) => set({ user }, false, 'setUser'),
    
    // تحديث جزئي لتجنّب re-renders
    updateUserProfile: (profile: Partial<User>) => 
      set((state) => ({ 
        user: state.user ? { ...state.user, ...profile } : null 
      }), false, 'updateUserProfile'),
  }))
);

// Hook محسّن لتجنّب re-renders غير الضرورية
export const useUser = () => useAppStore((state) => state.user);

import React, { memo } from 'react';
import { Image, ImageProps } from 'react-native';

interface OptimizedImageProps extends ImageProps {
  priority?: 'high' | 'low';
  placeholder?: boolean;
}

export const OptimizedImage = memo<OptimizedImageProps>(({
  priority = 'low',
  placeholder = true,
  ...props
}) => {
  return (
    <Image
      {...props}
      // Cache محسّن
      cache="force-cache"
      // Lazy loading للصور غير الحرجة
      loadingIndicatorSource={
        placeholder ? require('../assets/placeholder.png') : undefined
      }
      // Preload مشروط
      onLoadStart={() => {
        if (priority === 'high') {
          // Preload للصور المرتبطة
        }
      }}
    />
  );
});