Mengoptimumkan Prestasi dalam Aplikasi React

Prestasi ialah aspek penting dalam pembangunan web, terutamanya dalam aplikasi React yang mana UInya sangat dinamik. Dalam catatan blog ini, saya akan berkongsi beberapa strategi dan amalan terbaik yang boleh membantu mengoptimumkan apl React anda untuk memastikan apl tersebut berjalan lancar, dimuatkan dengan cepat dan memberikan pengalaman pengguna yang lebih baik.

1. Memoisasi dengan React.memo()

React memaparkan semula komponen secara lalai, walaupun prop mereka tidak berubah. Ini boleh menyebabkan pemaparan semula yang tidak perlu dan menjejaskan prestasi. Untuk mengelakkan ini, kita boleh menggunakan React.memo() untuk menghafal komponen berfungsi. Ia memberitahu React untuk melangkau pemaparan komponen jika propnya tidak berubah.

const MyComponent = React.memo((props) => {
  // Your component logic
});

2. Gunakan useCallback dan useMemo Cangkuk

Untuk fungsi dan nilai yang dikira yang hanya perlu dikira semula apabila kebergantungan tertentu berubah, cangkuk useCallback dan useMemo ialah alat yang hebat.

• useMemo digunakan untuk menghafal pengiraan mahal

• useCallback digunakan untuk menghafal fungsi panggil balik
  

const memoizedCallback = useCallback(() => {
  doSomething();
}, [dependency]);
const memoizedValue = useMemo(() => computeExpensiveValue(), [dependency]);

3. Malas Memuatkan Komponen

Untuk apl yang lebih besar, memuatkan semuanya sekali gus boleh memperlahankan prestasi. React menyediakan sokongan terbina dalam untuk komponen memuatkan malas menggunakan React.lazy() dan Suspense. Pendekatan ini membolehkan anda memuatkan komponen hanya apabila ia diperlukan, mengurangkan masa pemuatan awal.

const LazyComponent = React.lazy(() => import('./LazyComponent'));
function MyApp() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

4. Optimumkan paparan semula dengan shouldComponentUpdate dan PureComponent

Dalam komponen berasaskan kelas, menggunakan shouldComponentUpdate boleh menghalang pemaparan semula yang tidak perlu dengan menyediakan kawalan ke atas masa komponen perlu dikemas kini.

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // Return true if the component should update
    return nextProps.someValue !== this.props.someValue;
  }
}

Sebagai alternatif, anda boleh menggunakan React.PureComponent untuk melakukan perbandingan cetek prop dan keadaan secara automatik, menghalang pemaparan semula jika tiada perubahan.

class MyPureComponent extends React.PureComponent {
  // This automatically prevents re-renders on shallow prop/state equality
}

5. Bertingkap/Malas Rendering

Jika apl anda perlu memaparkan senarai atau jadual yang besar, memaparkan kesemuanya sekali gus boleh menjejaskan prestasi. Perpustakaan seperti react-window dan react-virtualized boleh membantu dengan memaparkan hanya bahagian senarai yang boleh dilihat, meningkatkan prestasi dengan ketara.

import { FixedSizeList as List } from 'react-window';
const MyList = ({ items }) => (
  <List
    height={500}
    itemCount={items.length}
    itemSize={35}
    width={300}
  >
    {({ index, style }) => (
      <div style={style}>
        {items[index]}
      </div>
    )}
  </List>
);

6. Pemisahan Kod

Pembahagian kod membolehkan anda memecahkan kod anda kepada berkas yang lebih kecil, yang dimuatkan atas permintaan. Ini boleh mengurangkan masa pemuatan awal secara mendadak. Dengan alatan seperti webpack dan sokongan terbina dalam React untuk import dinamik, anda boleh melaksanakan pemisahan kod dengan mudah.

import('./MyComponent').then((module) => {
  const MyComponent = module.default;
  // Do something with MyComponent
});

7. Gunakan CDN untuk Aset Statik

Menyajikan aset statik seperti imej, fon dan helaian gaya daripada Rangkaian Penghantaran Kandungan (CDN) mengurangkan beban pada pelayan anda dan mempercepatkan penghantaran aset tersebut kepada pengguna.

8. Elakkan Fungsi Tanpa Nama dalam JSX

Setiap kali komponen dipaparkan semula, kejadian baharu fungsi tanpa nama dicipta, menyebabkan potensi masalah prestasi. Sebaliknya, tentukan fungsi di luar JSX atau gunakan useCallback untuk menghafalnya.

// Avoid this
<button onClick={() => handleClick()}>Click Me</button>

// Do this instead
const handleClick = useCallback(() => {
  // Handle click
}, []);
<button onClick={handleClick}>Click Me</button>

9. Elakkan Terlalu mengambil Data

Mengambil data yang tidak diperlukan boleh melambatkan apl, terutamanya pada rangkaian perlahan. Gunakan penomboran, penatalan tidak terhingga atau pengambilan data bersyarat untuk mengehadkan jumlah data yang diambil daripada pelayan.

10. Kurangkan Perdamaian dengan Alat Utama

Apabila memaparkan senarai dalam React, menyediakan prop utama yang unik membantu React mengenal pasti item yang telah diubah, ditambah atau dialih keluar, meminimumkan kerja penyelarasan dan meningkatkan prestasi.

{items.map(item => (
  <div key={item.id}>{item.name}</div>
))}

Kesimpulan

Mengoptimumkan prestasi dalam aplikasi React ialah tentang memahami cara React membuat komponen dan menguruskan pemaparan semula yang tidak perlu. Dengan memanfaatkan alatan seperti React.memo(), useCallback, useMemo, pemuatan malas dan pemisahan kod, anda boleh meningkatkan prestasi apl React anda dengan ketara.

Ingat, matlamatnya bukanlah untuk mengoptimumkan segala-galanya secara pramatang, sebaliknya untuk mengambil berat tentang prestasi apabila apl anda semakin rumit. Jika anda mempunyai petua pengoptimuman prestasi lain untuk React, sila kongsikannya dalam ulasan!

Pengarang:
Rafi Ferdos - portfolio

Atas ialah kandungan terperinci Mengoptimumkan Prestasi dalam Aplikasi React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!