Mengoptimumkan Paparan Semula dalam React: Amalan Terbaik

Salah satu punca utama kesesakan prestasi dalam React, terutamanya dalam apl besar, ialah pemaparan semula. Mekanisme DOM maya React mengemas kini DOM dengan berkesan, tetapi pemaparan semula yang tidak perlu masih boleh menyebabkan masalah prestasi. Paparan semula boleh dioptimumkan untuk memastikan bahawa hanya komponen yang memerlukannya dipaparkan semula, yang meningkatkan prestasi aplikasi dan responsif.

Amalan terbaik untuk mengurangkan pemaparan semula yang sia-sia dalam apl React akan dibincangkan dalam siaran ini, bersama beberapa petua dan kaedah yang berguna untuk membantu anda memaksimumkan kecekapan komponen React anda.

Memahami Paparan Semula dalam Reaksi

Proses pemaparan React berkisar pada pokok komponennya. Apabila keadaan komponen atau prop berubah, React memaparkan semula komponen itu dan komponen anaknya. Walau bagaimanapun, jika tidak diurus dengan betul, ini boleh menyebabkan pemaparan semula yang tidak perlu, di mana komponen yang tidak mengalami sebarang perubahan sebenar turut dipaparkan semula, membazir sumber.

Punca Biasa Re-Render yang Tidak Diperlukan

Perubahan prop atau nyatakan yang tidak menjejaskan output komponen.
Paparan semula komponen induk menyebabkan komponen anak dipaparkan semula, walaupun prop mereka tidak berubah.
Fungsi tanpa nama atau rujukan objek dibuat semula pada setiap paparan.

Teknik Utama untuk Mengoptimumkan Paparan Semula dalam React

1. Gunakan React.memo untuk Komponen Berfungsi

React.memo ialah komponen tertib tinggi (HOC) yang membantu menghalang pemaparan semula yang tidak perlu dalam komponen berfungsi dengan menghafal hasilnya. Jika prop komponen tidak berubah, React.memo menghalangnya daripada dipaparkan semula.

const MyComponent = React.memo(({ data }) => {
  console.log('Component rendered');
  return <div>{data}</div>;
});

Dengan pengoptimuman ini, MyComponent hanya akan dipaparkan semula apabila prop datanya berubah, meningkatkan prestasi.

2. Optimumkan Paparan Semula dengan useCallback dan useMemo

?? useCallback: Digunakan untuk menghafal fungsi supaya ia tidak dicipta semula pada setiap paparan. Ini berguna apabila menurunkan fungsi kepada komponen anak yang bergantung pada nilai tertentu.

const handleClick = useCallback(() => {
  // handle button click
}, []);

?? useMemo: Digunakan untuk menghafal pengiraan mahal atau data terbitan untuk mengelakkan pengiraan semula pada setiap paparan.

const expensiveCalculation = useMemo(() => {
  return someHeavyFunction(input);
}, [input]);

Cakuk ini memastikan bahawa hanya apabila kebergantungan berubah, fungsi atau nilai akan dikira semula, mengurangkan pemaparan yang tidak perlu.

3. Elakkan Fungsi Sebaris dan Penciptaan Objek dalam JSX

Fungsi sebaris atau objek yang dibuat di dalam JSX ialah sumber biasa pemaparan semula. Memandangkan fungsi atau rujukan objek baharu dibuat setiap kali komponen dipaparkan, ia mencetuskan pemaparan semula yang tidak perlu dalam komponen anak.

// Avoid this pattern
<MyChildComponent onClick={() => doSomething()} />

// Instead, define the function outside the JSX
const handleClick = () => doSomething();
<MyChildComponent onClick={handleClick} />

Dengan mengelakkan fungsi sebaris atau penciptaan objek dalam JSX, anda membantu menghalang komponen anak daripada dipaparkan semula secara tidak perlu.

4. Pisahkan Komponen Besar kepada Komponen Lebih Kecil

Satu lagi teknik untuk mengelakkan pemaparan semula yang tidak perlu ialah memecahkan komponen besar kepada komponen yang lebih kecil dan lebih fokus. Ini membolehkan React melakukan kemas kini yang lebih terperinci dan menghalang pemaparan semula keseluruhan komponen apabila hanya sebahagian daripada komponen telah berubah.

Sebagai contoh, jika anda mempunyai komponen yang memaparkan borang dan senarai, anda boleh membahagikannya kepada dua komponen yang berasingan. Dengan cara ini, mengemas kini borang tidak akan mencetuskan pemaparan semula senarai dan begitu juga sebaliknya.

function ParentComponent() {
  return (
    <>
      <FormComponent />
      <ListComponent />
    </>
  );
}

5. Gunakan Prop kunci dengan Betul

Apabila memaparkan senarai, React menggunakan prop utama untuk mengenal pasti elemen. Penggunaan prop kunci yang salah boleh menyebabkan React tersalah mengemas kini atau memaparkan semula komponen.

Pastikan anda menggunakan kunci unik dan stabil untuk setiap elemen dalam senarai:

const items = ['apple', 'banana', 'orange'];
items.map((item) => <li key={item}>{item}</li>);

Elakkan menggunakan indeks sebagai kunci apabila item boleh disusun semula atau diubah suai, kerana ia boleh membawa kepada pemaparan semula yang tidak dijangka atau pemaparan yang salah.

6. Gunakan shouldComponentUpdate dan PureComponent dalam Komponen Kelas

Untuk komponen kelas, shouldComponentUpdate ialah kaedah kitaran hayat yang membolehkan anda mengawal sama ada komponen perlu dipaparkan semula berdasarkan perubahan dalam prop atau keadaan.

Sebagai alternatif, anda boleh menggunakan PureComponent, yang secara automatik melaksanakan shouldComponentUpdate dengan perbandingan prop dan keadaan yang cetek.

class MyComponent extends React.PureComponent {
  render() {
    return <div>{this.props.data}</div>;
  }
}

PureComponent ialah alternatif yang lebih mudah kepada shouldComponentUpdate dan membantu mengelakkan pemaparan semula yang tidak perlu dengan membandingkan prop dan keadaan sebelumnya dan semasa.

7. Optimumkan Penggunaan API Konteks

Apabila menggunakan API Konteks React, berhati-hati tentang penggunaan berlebihan, kerana ia boleh menyebabkan pemaparan semula yang tidak perlu jika setiap pengguna membuat semula apabila nilai konteks berubah. Untuk mengelakkan perkara ini:

Break down context providers into smaller ones, so only the necessary part of the state triggers updates.
Memoize values passed to the context provider using useMemo to avoid unnecessary re-renders.

const value = useMemo(() => ({ state, updateState }), [state]);

return (
  <MyContext.Provider value={value}>
    {children}
  </MyContext.Provider>
);

8. Lazy Load Components

For performance improvements, especially in large applications, you can lazy load components that are not immediately needed. This can reduce the initial rendering time and the load on the main thread.

React’s React.lazy and Suspense can help in lazy-loading components:

const LazyComponent = React.lazy(() => import('./LazyComponent'));

<Suspense fallback={<div>Loading...</div>}>
  <LazyComponent />
</Suspense>

By lazy-loading components, you delay their rendering until they are actually needed, which reduces unnecessary renders and improves the user experience.

Conclusion

Maintaining performance in React apps requires optimizing re-rendering, especially as the application grows. Avoid needless re-renders by employing strategies like using React.memo, useCallback, useMemo, and breaking up big components into smaller ones. By putting these tactics to good use, you can make sure that your React application stays light-weight, responsive, and simple to update.

Atas ialah kandungan terperinci Mengoptimumkan Paparan Semula dalam React: Amalan Terbaik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!