pengenalan

Saya telah menulis kod React selama lebih daripada 3 tahun sekarang. Walau bagaimanapun, satu perkara yang saya tidak fokus pada mulanya ialah mengoptimumkan prestasi React. Selalunya hutang teknikal terkumpul dan menjadi mencabar untuk mengoptimumkan prestasi.

Agak sukar untuk menumpukan pada pengoptimuman dari awal tetapi anda boleh menjadualkan pengoptimuman dari semasa ke semasa untuk mengelakkan hutang teknikal yang besar.

Kami akan melihat beberapa teknik pengoptimuman untuk React. Ini boleh dilaksanakan semasa anda menulis kod. Ia adalah soal memilih kaedah ini berbanding kaedah lain.

Jadi, mari kita mulakan.

1. Mengoptimumkan Senarai Besar

Senarai pemaparan adalah perkara biasa kerana terdapat komponen dalam React. Memaparkan senarai besar adalah mencabar kerana ia boleh menyebabkan pemaparan yang perlahan dan penggunaan memori. Maya adalah cara terbaik untuk menangani masalah sedemikian. Ia hanya memaparkan senarai yang boleh dilihat sahaja dan item lain akan dipaparkan apabila diperlukan.

React Window dan React Virtualized ialah perpustakaan popular untuk senarai virtualisasi. Mereka memaparkan hanya item yang boleh dilihat dalam port pandangan, dengan ketara mengurangkan bilangan nod DOM yang diberikan pada bila-bila masa.

Berikut ialah contoh dengan React Window:

import { FixedSizeList as List } from 'react-window'; const MyList = ({ items }) => (  {({ index, style }) => ( 
 {items[index]} 
 )}  );

2. gunakanMemo

useMemo ialah cangkuk React yang menghafal hasil pengiraan. Oleh itu, ia tidak membenarkan pemprosesan berbilang pengiraan melainkan terdapat perubahan dalam kebergantungan. Ini boleh berguna untuk mengoptimumkan prestasi dalam senario di mana fungsi atau pengiraan adalah mahal dan tidak boleh dilaksanakan semula pada setiap pemaparan.

Sintaks useMemo ialah:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Seperti yang anda lihat, useMemo mengambil dua hujah:

• Fungsi yang mengembalikan nilai supaya boleh dihafal.
• Susun atur kebergantungan yang menentukan bila nilai yang dihafal harus menjadi komputer semula.

Berikut ialah contoh useMemo:

import React, { useState, useMemo } from 'react'; const ExpensiveComponent = ({ a, b }) => { const computeExpensiveValue = (a, b) => { console.log('Computing expensive value...'); return a + b; }; const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); return (
         

          
Computed Value: {memoizedValue}
         
); }; const ParentComponent = () => { const [a, setA] = useState(1); const [b, setB] = useState(2); const [count, setCount] = useState(0); return (
         

          
          setCount(count + 1)}>Increment Count
         
); };

3. Pemisahan Kod

Dalam persediaan tradisional, semua komponen aplikasi anda digabungkan ke dalam satu fail. Pemisahan Kod ialah teknik pengoptimuman untuk memecahkan aplikasi anda kepada bahagian yang lebih kecil. Ia mengurangkan masa memuatkan aplikasi apabila anda memuatkan komponen yang lebih kecil dan mengelakkan komponen lain yang tidak diperlukan.

Berikut ialah contoh Pemisahan Kod:

import React, { useState } from 'react'; function App() { const [component, setComponent] = useState(null); const loadComponent = async () => { const { default: LoadedComponent } = await import('./MyComponent'); setComponent(); }; return ( 
 
Code Splitting Example
 Load Component {component} 
 ); } export default App;

4. React Lazy Load

React.Lazy ialah kaedah penting untuk mengoptimumkan pemuatan komponen. Ia membolehkan anda malas memuatkan komponen. Ini bermakna komponen itu hanya dimuatkan jika diperlukan. Menggunakan ini, anda boleh membahagikan aplikasi anda kepada komponen yang lebih kecil dan dimuatkan atas permintaan.

React.lazy() digunakan untuk mengimport komponen secara dinamik. Apabila komponen diperlukan, ia dimuatkan secara tidak segerak dan sehingga itu, UI sandaran (seperti pemutar pemuatan) boleh dipaparkan.

Berikut ialah contoh Lazy Load:

import React, { Suspense } from 'react'; const LazyComponent = React.lazy(() => import('./MyComponent')); const App = () => { return ( 
 
My App
 Loading...
}>