Bagaimanakah anda mengoptimumkan prestasi aplikasi React Native?

Question

Accepted Answer

Mengoptimumkan prestasi React Native melibatkan meminimumkan **re-renders** yang tidak perlu, **lists** yang cekap, mengurangkan **kerja JS-thread** dan trafik bridge, mengoptimumkan imej, dan menggunakan native thread untuk animasi. Prestasi adalah penting untuk aplikasi yang lancar dan responsif.

## Minimumkan re-renders (kebimbangan React utama)

```text
✓ Elakkan RE-RENDERS yang tidak perlu:
  → React.memo (memoize components), useMemo (values), useCallback (functions)
  → KEYS yang betul dan stabil dalam lists; elakkan mencipta objects/functions baharu inline yang
    menyebabkan children re-render
  → struktur state yang betul (jangan letak semuanya dalam satu state besar yang re-render semua)
```

## Lists yang cekap

```text
✓ Gunakan FLATLIST (bukan ScrollView + map) untuk lists panjang — lazy rendering/virtualization
✓ Optimumkan FlatList: keyExtractor, getItemLayout, windowSize, removeClippedSubviews;
  pastikan item components ringan dan memoized
✓ Untuk lists yang sangat besar/kompleks → FlashList (Shopify) — alternatif drop-in yang lebih pantas
```

## JS thread dan bridge

```text
✓ JS thread menjalankan kod anda — pastikan ia bebas untuk responsiveness (elakkan kerja
  synchronous berat; ia menyebabkan jank/dropped frames)
✓ Minimumkan trafik BRIDGE (seni bina lama) — lintasan JS↔native yang kerap adalah mahal
  (SENI BINA BAHARU / JSI mengurangkan ini)
✓ Jalankan ANIMASI pada native thread (useNativeDriver / Reanimated) — bukan JS thread
✓ Pindahkan pengiraan berat; debounce operasi yang mahal
```

## Pengoptimuman lain

```text
✓ Optimumkan IMEJ (sizes, caching — cth. FastImage); lazy-load
✓ Kurangkan masa startup aplikasi dan saiz bundle; gunakan Hermes (enjin JS yang dioptimumkan)
✓ PROFILE untuk mencari bottlenecks (Flipper, performance monitor, React DevTools profiler)
✓ Uji pada peranti tahap rendah (bukan hanya tahap tinggi)
```

## Mengapa ia penting

Memahami pengoptimuman prestasi React Native ialah pengetahuan peringkat senior yang berharga kerana **prestasi yang lancar adalah penting untuk pengalaman pengguna yang baik**, dan React Native mempunyai pertimbangan prestasi khusus, jadi ia penting untuk membina aplikasi yang berkualiti.

Seperti React untuk web, kebimbangan utama ialah **meminimumkan re-renders yang tidak perlu** (menggunakan React.memo, useMemo, useCallback, keys yang stabil, dan struktur state yang betul untuk mengelakkan re-render komponen secara tidak perlu) — isu prestasi yang lazim dalam aplikasi React Native. **Lists yang cekap** adalah kritikal: menggunakan **FlatList** (bukan ScrollView + map) untuk lists panjang dengan pengoptimuman yang betul (keyExtractor, getItemLayout, item components yang ringan dan memoized), dan menggunakan **FlashList** untuk lists yang sangat besar — kerana lists adalah lazim dan yang dirender dengan buruk menyebabkan masalah prestasi sebenar.

Memahami pertimbangan **JS-thread dan bridge** adalah amat penting dan khusus React Native: **JS thread mesti kekal bebas** untuk responsiveness (kerja synchronous berat menyebabkan jank), **trafik bridge** (dalam seni bina lama) adalah mahal jadi komunikasi JS↔native harus diminimumkan (seni bina baharu/JSI mengurangkan ini), dan yang penting **animasi harus dijalankan pada native thread** (melalui useNativeDriver/Reanimated, bukan JS thread) untuk kelancaran — ini mencerminkan seni bina threading JS/native yang unik bagi React Native dan implikasi prestasinya.

Pengoptimuman lain (pengoptimuman imej dengan caching, mengurangkan saiz startup/bundle, menggunakan Hermes, profiling untuk mencari bottlenecks, dan menguji pada peranti tahap rendah) melengkapkan kit alat tersebut.

Prestasi yang lancar secara langsung mempengaruhi UX, dan seni bina React Native memperkenalkan pertimbangan khusus (JS thread, bridge, animasi native-thread) melangkaui pengoptimuman React umum.

Memandangkan prestasi yang lancar adalah penting untuk UX dan React Native mempunyai pertimbangan prestasi khusus (re-renders, lists yang cekap, JS thread/bridge, animasi native-thread), dan memandangkan pengoptimuman yang betul menangani perkara ini memastikan aplikasi kekal lancar, memahami pengoptimuman prestasi React Native ialah pengetahuan peringkat senior yang berharga untuk membina aplikasi yang responsif dan halus — kemahiran utama yang mencerminkan kedua-dua pengoptimuman React (re-renders, lists) dan kebimbangan khusus React Native (JS thread, bridge, animasi native), penting untuk kesedaran prestasi yang dijangka daripada pembangun React Native senior.