react native best practice

React-asli-terbaik-praktik adalah praktik terbaik yang bereaksi asli dan paket, yang menyediakan teknik untuk meningkatkan kinerja serta utilitas untuk meningkatkan kinerja aplikasi

Daftar isi

• Why-Did-You-Render (hindari rerender tambahan)
• Memoisasi dalam Bereaksi
  • Komponen murni
  • Kesetaraan referensi
  • Bereaksi
  • Contoh
  • Bereaksi-asli-kinerja
  • Penafian
  • react-asli-practice hooks dan utils
    • Instalasi
    • Penggunaan
    • Daftar kait
    • Util
• Tips pro
  • Monitor Ram, JS Framerate, dan UI Framerate
  • Gunakan FlashList untuk daftar
  • Logger Kustom
  • Manajemen negara
  • Ref
  • Tumpukan asli
  • Penyangga
  • Penyimpanan (MMKV)
  • Placeholder gambar/video
  • $ Mata uang yang ditangani
  • Safearea Insets
  • Buku C ++
  • Komponen teks khusus
  • Angka besar
  • Crypto
  • Lakukan pengukur kinerja dan profil
  • Hapus Console.log dari Aplikasi Produksi

Why-Did-You-Render (hindari rerender tambahan)

Anda harus menggunakan mengapa-apakah-Anda-render yang memberi tahu Anda tentang re-render yang berpotensi dihindari.

 import React from 'react' ;

const useWDYR = __DEV__ ;

if ( useWDYR ) {
  const whyDidYouRender = require ( '@welldone-software/why-did-you-render' ) ;
  whyDidYouRender ( React , {
    // Enable tracking in all pure components by default
    trackAllPureComponents : true ,
    trackHooks : true ,

    include : [
      // Uncomment to enable tracking in all components. Must also uncomment /^Screen/ in exclude.
      // /.*/,
      // Uncomment to enable tracking by displayName, e.g.:
      // /^Components/,
    ] ,

    exclude : [
      // Uncomment to enable tracking in all components
      // /^Components/,
    ] ,
  } ) ;
}

Impor di atas kode file ke dalam index.js root app Anda

Memoisasi dalam Bereaksi

Memungkinkan Anda melewatkan ulang komponen ketika alat peraga tidak berubah.

Penting untuk memoisasi perhitungan berat serta array dan kreasi objek sehingga mereka tidak diciptakan kembali pada setiap render. Render ulang terjadi ketika keadaan berubah, Redux mengirimkan beberapa tindakan, atau ketika pengguna mengetikkan input teks (render ulang untuk setiap tekan tombol tunggal). Anda tidak ingin menjalankan banyak operasi di render tersebut karena alasan yang sangat jelas - jadi tidak ada penyaringan berat, tidak ada operasi daftar, dll.

Komponen murni

Komponen murni (atau komponen React.memo .

Setiap variabel yang Anda buat dalam fungsi render Anda akan dialokasikan kembali pada setiap render. Meskipun ini bukan masalah untuk jenis nilai , ini menyebabkan jenis referensi berbeda pada setiap render. Ketika Anda meneruskan variabel-variabel tersebut ke komponen murni melalui alat peraga, mereka masih akan merender meskipun alat peraga secara logis sama. Seringkali variabel -variabel itu bahkan melewati jembatan dan membuat aplikasi Anda lambat.

Kesetaraan referensi

Ketika komponen murni muncul kembali, itu membandingkan alat peraga sebelumnya dengan alat peraga saat ini dan memeriksa apakah mereka dangkal-setara .

Jenis Nilai

Angka , string, dan boolean adalah tipe nilai , yang berarti mereka dapat dibandingkan dengan nilai :

 const i1 = 7 ;
const i2 = 7 ;
const equal = i1 === i2 ; // true

Jenis referensi

Objek , array dan fungsi adalah tipe referensi , yang berarti mereka tidak dapat dibandingkan dengan nilai logisnya, tetapi harus dibandingkan dengan referensi :

 const o1 = { x : 7 } ;
const o2 = { x : 7 } ;
const equal = o1 === o2 ; // false

Perbandingan referensi cukup membandingkan alamat memori variabel, jadi hanya o1 === o1 yang true dalam contoh kode di atas.

'isequal from react-practice-practice` untuk membandingkan objek dengan kesetaraan aktual, tetapi itu bukan kesetaraan yang dangkal lagi.

Bereaksi

Jika Anda membuat objek dalam fungsi render Anda, mereka akan diciptakan kembali pada setiap render. Ini berarti ketika Anda membuat objek dalam render pertama, itu tidak sama-sama dengan objek dalam render kedua. Untuk alasan ini, ada memoisasi.

• Gunakan kait useMemo untuk memoize array dan objek yang akan menjaga kesetaraan referensi mereka (dan tidak akan diciptakan kembali pada setiap render) selama dependensi (argumen kedua) tetap sama. Juga gunakan useMemo untuk cache perhitungan berat, seperti operasi array, penyaringan, dll.
• Gunakan hook useCallback untuk memoize suatu fungsi.
• Jika Anda membuat objektif tetapi dapat memiliki nilai yang sama maka Anda dapat menggunakan useDeepEffect , useDeepCallback , useDeepImperativeHandle dan useDeepLayoutEffect dari import {useDeepEffect, ...} from 'react-native-best-practice'

Secara umum, komponen fungsi dapat dioptimalkan lebih mudah karena konsep kait. Namun Anda dapat menerapkan teknik serupa untuk komponen kelas, ketahuilah bahwa ini akan menghasilkan lebih banyak kode.

Bereaksi asli

Sementara animasi dan tugas intensif kinerja dijadwalkan di utas asli, seluruh logika bisnis Anda berjalan pada satu utas JavaScript, jadi pastikan Anda melakukan pekerjaan sesedikit mungkin di sana. Melakukan terlalu banyak pekerjaan di utas JavaScript dapat dibandingkan dengan ping tinggi dalam video game - Anda masih bisa melihat -lihat dengan lancar, tetapi Anda tidak dapat benar -benar memainkan permainan karena setiap interaksi terlalu lama.

Komponen asli ( <View> , <Text> , <Image> , <Blurhash> , ...) harus meneruskan alat peraga ke asli melalui jembatan. Mereka dapat dimoized, jadi bereaksi membandingkan alat peraga untuk kesetaraan dangkal dan hanya melewati mereka di atas jembatan jika mereka berbeda dari alat peraga dari render terakhir. Jika Anda tidak memoize dengan benar, Anda mungkin melewati alat peraga melewati jembatan untuk setiap render tunggal, menyebabkan jembatan sangat sibuk. Lihat Contoh Gaya - Gaya akan dikirim melalui jembatan pada setiap render ulang!

Berikut adalah beberapa contoh untuk membantu Anda menghindari melakukan terlalu banyak pekerjaan di utas JavaScript Anda:

Contoh

Gaya

Buruk

 return < View style = { [ styles . container , { backgroundColor : 'red' } ] } /> ;

Bagus

 const style = useMemo ( ( ) => [ styles . container , { backgroundColor : 'red' } ] , [ ] ) ;
return < View style = { style } /> ;

Pengecualian

• Gaya yang dihidupkan kembali dari useAnimatedStyle , karena itu harus dinamis.

Array

Menggunakan filter , map atau operasi array lainnya di renderers akan menjalankan seluruh operasi lagi untuk setiap render.

Buruk

 return (
  < Text > { users . filter ( ( u ) => u . status === 'online' ) . length } users online </ Text >
) ;

Bagus

 const onlineCount = useMemo (
  ( ) => users . filter ( ( u ) => u . status === 'online' ) . length ,
  [ users ]
) ;
return < Text > { onlineCount } users online </ Text > ;

Anda juga dapat menerapkan ini untuk memberikan beberapa tampilan bereaksi dengan .map . Itu bisa dimoized dengan useMemo juga.

Fungsi

Buruk

 return < View onLayout = { ( layout ) => console . log ( layout ) } /> ;

Bagus

 const onLayout = useCallback ( ( layout ) => {
  console . log ( layout ) ;
} , [ ] ) ;
return < View onLayout = { onLayout } /> ;

Pastikan juga memikirkan panggilan lain di renderer, misalnya useSelector , useComponentDidAppear - Bungkus panggilan balik di sana juga!

Fungsi propagasi ke depan

Buruk

 function MyComponent ( props ) {
  return < PressableOpacity onPress = { ( ) => props . logoutUser ( ) } /> ;
}

Bagus

 function MyComponent ( props ) {
  return < PressableOpacity onPress = { props . logoutUser } /> ;
} 

Objek

Buruk

 function MyComponent ( props ) {
  return (
    < RecyclerListView scrollViewProps = { { horizontal : props . isHorizontal } } />
  ) ;
}

Bagus

 function MyComponent ( props ) {
  const scrollViewProps = useMemo (
    ( ) => ( {
      horizontal : props . isHorizontal ,
    } ) ,
    [ props . isHorizontal ]
  ) ;
  return < RecyclerListView scrollViewProps = { scrollViewProps } /> ;
} 

Mengangkat keluar dari render

Buruk

 function MyComponent ( ) {
  return < RecyclerListView scrollViewProps = { { horizontal : true } } /> ;
}

Bagus

 const SCROLL_VIEW_PROPS = { horizontal : true } ;

function MyComponent ( ) {
  return < RecyclerListView scrollViewProps = { SCROLL_VIEW_PROPS } /> ;
}

Ini berlaku untuk objek serta fungsi yang tidak bergantung pada status komponen atau alat peraga. Selalu gunakan ini jika Anda bisa, karena itu bahkan lebih efisien daripada useMemo dan useCallback .

Keadaan awal

Buruk

 const [ me , setMe ] = useState ( users . find ( ( u ) => u . id === myUserId ) ) ;

Bagus

 const [ me , setMe ] = useState ( ( ) => users . find ( ( u ) => u . id === myUserId ) ) ;

Hook useState menerima fungsi inisialisasi. Sementara contoh pertama ("buruk") menjalankan .find Temukan pada setiap render, contoh kedua hanya menjalankan fungsi yang diteruskan sekali untuk menginisialisasi keadaan.

Hitung ulang

Saat menulis komponen baru, saya selalu menempatkan pernyataan log dalam fungsi render saya untuk secara pasif menonton seberapa sering komponen saya muncul kembali saat saya sedang mengerjakannya. Secara umum, komponen harus merender ulang sesedikit mungkin, dan jika saya melihat banyak log muncul di konsol saya, saya tahu saya melakukan sesuatu yang salah. Ini adalah pakta yang baik untuk menempatkan fungsi ini di komponen Anda setelah Anda mulai mengerjakannya, dan menghapusnya setelah selesai.

 function ComponentImWorkingOn ( ) {
  // code
  console . log ( 're-rendering ComponentImWorkingOn!' ) ;
  return < View /> ;
}

Anda juga dapat menggunakan perpustakaan mengapa-Anda-render untuk mencari tahu mengapa komponen telah dirender (perubahan prop, perubahan negara, ...) dan mungkin menangkap kesalahan sejak dini.

React.memo

Buruk

 export const MyComponent = ( props ) => {
  return ...
}

Bagus

 const MyComponentImpl = ( props ) => {
  return ...
}

export const MyComponent = React . memo ( MyComponentImpl ) ;

Jika komponen Anda membuat hasil yang sama dengan alat peraga yang sama, Anda dapat membungkusnya dalam panggilan untuk React.memo(...) untuk peningkatan kinerja dalam beberapa kasus dengan memoisasi hasilnya. Ini berarti bahwa React akan melewatkan rendering komponen, dan menggunakan kembali hasil terakhir yang diberikan. Lihat dokumen resmi untuk React.memo , dan gunakan React.memo(...) dengan bijak.

Bereaksi-asli-kinerja

Jika aplikasi Anda terasa lambat, cobalah perpustakaan reaksi-asli-kinerja dan itu plugin sirip untuk membuat profil kinerja aplikasi Anda dalam berbagai aspek seperti waktu untuk interaktif , komponen membuat waktu , eksekusi skrip , dan banyak lagi.

Penafian

Jangan mengoptimalkan secara prematur. Beberapa contoh yang digunakan di sini (misalnya useMemo ) sangat kecil dan hanya menunjukkan idenya. Hook seperti `Usememo juga dilengkapi dengan biaya (mengalokasikan fungsi dan array DEP, memanggil kait yang sebenarnya dan menjalankan perbandingan array), jadi perlu diingat bahwa seringkali lebih baik untuk hanya meneruskan objek atau array secara langsung jika komponen itu sendiri dioptimalkan. Setelah kompleksitas komponen tertentu atau dengan grafik ketergantungan tertentu, fungsi memoisasi dapat menjadi kemenangan kinerja yang sangat besar, tetapi ada juga kasus -kasus di mana ia hanya mengarah pada kode yang tidak perlu kompleks dan kadang -kadang bahkan kinerja yang lebih buruk. Selalu tolok ukur sebelum dan sesudah!

Kait dan util praktik terbaik

Instalasi

 npm i react-native-best-practice

Penggunaan

Semua argumen yang lewat seperti pada React Hooks asli seperti

 import {useDeepEffect} from 'react-native-best-practice'

useDeepEffect(()=>{

},[recreatedDeepObject])

Daftar kait

• useDeepEffect => useEffect
• useDeepMemo => useMemo
• useDeepCallback => useCallback
• useDeepImperativeHandle => useImperativeHandle
• useDeepLayoutEffect => useLayoutEffect

Util

• isEqual => akan memeriksa isequal secara mendalam
• cloneDeep => akan mengkloning objek dan array secara mendalam

Tips pro

Monitor Ram, JS Framerate, dan UI Framerate

Selalu nyalakan monitor pref saat mengembangkan aplikasi karena akan memberi tahu Anda framerate ui dan js framerate, jika ada bingkai yang turun maka Anda dapat memeriksa kode baru mana yang menyebabkan bingkai menjatuhkan dan membuat waktu Anda untuk interaktif (TTI) rendah, Anda dapat membuka Dev Menu di aplikasi Anda dan toggle Show Perf Monitor .

Gunakan FlashList untuk daftar

Jangan pernah menggunakan flatlist, selalu gunakan flashlist karena menggunakan konsep tampilan daur ulang, yang hanya membuat dan membuat sejumlah pandangan terbatas yang terlihat di layar

scroll.mp4

Logger Kustom

Buat instance logger khusus dan menegakkan emoji untuk mengkategorikan log. Dengan cara ini lebih mudah untuk menemukan garis yang relevan di konsol Anda, dan terlihat lebih ramah secara keseluruhan. Lakukan banyak logging untuk menyelamatkan diri Anda dari malam yang panjang untuk men -debug di titik selanjutnya!

Tumpukan asli

Selalu gunakan tumpukan asli dari @reactNavigation. Karena menggunakan primitif layar platform-asli, hampir selalu sepadan dengan perolehan kinerja atas tumpukan berbasis JS.

Manajemen negara

• Redux jika Anda sudah menggunakan redux maka Anda harus menggunakan ulang fungsi "pemilih" yang dimoisasi

• React Context Jika Anda sudah menggunakan konteks React maka Anda harus menggunakan fungsi-konteks-konteks untuk fungsi "selector" yang dimoized jika tidak nilai konteks diubah, semua komponen yang akan ditransfer kembali.

Direkomendasikan untuk menggunakan libs recoil ini, jotai zustand untuk manajemen negara

Ref

Jika Anda perlu melakukan sesuatu dalam komponen anak dari komponen induk, gunakan ref dan useimperativeHandle untuk memanggil fungsi komponen anak dari komponen induk alih -alih bermain dengan status yang masuk ke komponen anak

Penyangga

Gunakan garpu react-native-buffer dari @craftzdog, saat berhadapan dengan banyak buffer untuk mempercepat aplikasi Anda. Ini menggunakan implementasi yang didukung C ++ yang diekspos melalui JSI, yang kira-kira 4x lebih cepat dari implementasi berbasis JS.

Penyimpanan (MMKV)

Gunakan React-Native-MMKV untuk secara sinkron menyimpan dan mengambil data dari penyimpanan lokal, yang bertahan bahkan pada peluncuran aplikasi berikutnya. Dibandingkan dengan LocalStorage di web, MMKV juga memungkinkan Anda untuk mengenkripsi data Anda dan memiliki banyak contoh!

Placeholder gambar/video

Gunakan react-native-blurhash untuk menunjukkan placeholder buram yang indah untuk gambar dan video Anda. Hasilkan string pendek yang mewakili versi buram dari konten Anda ("blurhash") dan mengirimkannya bersama dengan data Anda ke aplikasi!

Pegangan mata uang

Saat menyajikan angka kepada pengguna, Anda harus memformatnya di tempat yang benar (koma, tanda mata uang, ..) Sementara .Tolocalestring (..) Apakah itu tugasnya, Anda benar -benar dapat membangun instance NumberFormat Anda sendiri untuk meningkatkan kinerja dengan ~ 2x!

Safearea Insets

Selalu menangani inset area yang aman dengan tepat. Alih -alih membungkus seluruh layar di A, Anda dapat bekerja dengan padding untuk membuat UI yang lebih bersih.

Di sini, kami lulus contentContainerStyle={{ paddingBottom: safeAreaBottom }} ke:

Safearea.mp4

Buku C ++

Baca "C ++ modern yang efektif". Bahkan jika Anda bukan pengembang C ++, buku ini akan membantu Anda memahami bagaimana manajemen memori bekerja dan mempercayainya atau tidak ini memengaruhi cara Anda berpikir tentang React (asli). Sebenarnya itulah satu -satunya buku pemrograman yang pernah saya baca

Anda akan mengerti mengapa {} === {} false, bagaimana kesetaraan identitas bekerja, bagaimana re-render adalah banyak alokasi, cara menghindari salinan, dan banyak hal lain tentang kinerja yang hanya membuat Anda berpikir sedikit berbeda saat menulis kode. Hanya saja, jangan dioptimalkan secara prematur?

Dan jika Anda ingin masuk ke pengembangan C ++ dengan JSI, bahkan lebih baik Anda membaca buku ini - C ++ tidak memaafkan JS. Jika Anda membuat perpustakaan yang memiliki kode C ++ yang buruk di dalamnya, pengguna akan membenci Anda karena membuat aplikasi mereka SIGABRT?

Komponen teks khusus

Jangan pernah menggunakan komponen secara langsung. Sebaliknya, buat abstraksi Anda sendiri sehingga Anda tidak mengulangi diri Anda dengan nama font, ukuran font atau warna setiap kali dan lebih mudah untuk mengubah properti di titik mana pun. Selain itu, buat aturan eslint untuk memperingatkan Anda setiap kali Anda mencoba menggunakan alih -alih ️

Angka besar

Saat berhadapan dengan jumlah besar, gunakan react-native-bignumber, bukan perpustakaan berbasis JS. ⚡️ Didukung oleh implementasi C ++ murni dan ~ 330x lebih cepat dari bn.js dalam aplikasi tertentu (mis. Aplikasi #Crypto, Ethers.js, Elliptic, Bitcoin)

Crypto

Saat bekerja dengan #crypto / kriptografi, gunakan crypto react-native-quick-bukan dari salah satu perpustakaan berbasis JS. ⚡️ Didukung oleh implementasi C ++ murni dan hingga 58x lebih cepat dari reaksi-asli-crypto atau crypto-browserifikasi dalam skenario tertentu.

Lakukan pengukur kinerja dan profil

Anda dapat menggunakan senter untuk menghasilkan skor kinerja untuk aplikasi Android Anda

Anda dapat melakukan profil untuk optimasi kinerja.

Hapus Console.log dari Aplikasi Produksi

Anda harus menghapus console.log dari aplikasi Prod sebagai menggunakan console.log pernyataan menurunkan FPS, Anda dapat menghapus Console.log dengan membaca ini

Kredit

Terima kasih kepada Marc Rousavy dan Margelo karena kebanyakan praktik terbaik adalah milik mereka