Memahami React.memo untuk Pengoptimuman Prestasi dalam React

React.memo ialah komponen tertib tinggi (HOC) yang membantu mengoptimumkan prestasi komponen React dengan menghalang pemaparan semula yang tidak perlu. Ia digunakan untuk menghafal komponen berfungsi, yang bermaksud React akan melangkau memaparkan semula komponen jika propnya tidak berubah. Ini amat berguna untuk pengoptimuman prestasi dalam aplikasi React yang besar di mana pemaparan semula mungkin mahal.

Bagaimana React.memo Berfungsi

React.memo berfungsi dengan melakukan perbandingan cetek props komponen. Jika prop adalah sama dengan pemaparan sebelumnya, React akan melangkau pemaparan komponen dan sebaliknya menggunakan hasil daripada pemaparan sebelumnya. Ini boleh mengurangkan dengan ketara bilangan pemaparan semula dan meningkatkan prestasi, terutamanya apabila memaparkan senarai besar atau komponen mahal.

Sintaks

const MemoizedComponent = React.memo(Component);

Di mana:

• Komponen ialah komponen berfungsi yang ingin anda hafal.
• MemoizedComponent ialah versi memoized baharu bagi komponen tersebut.

Contoh: Penggunaan Asas React.memo

Mari kita lihat contoh mudah bagaimana React.memo boleh digunakan:

import React, { useState } from 'react';

const ChildComponent = React.memo(({ name }) => {
  console.log("Child component re-rendered");
  return <div>Hello, {name}!</div>;
});

function App() {
  const [name, setName] = useState('John');
  const [count, setCount] = useState(0);

  return (
    <div>
      <ChildComponent name={name} />
      <button onClick={() => setName('Doe')}>Change Name</button>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <p>Count: {count}</p>
    </div>
  );
}

export default App;

Penjelasan:

• ChildComponent dibungkus dalam React.memo. Ia hanya dipaparkan semula apabila nama prop bertukar.
• Apl mempunyai dua bahagian keadaan: nama dan kiraan. Mengklik butang "Kiraan Pertambahan" tidak menukar prop nama, jadi ChildComponent tidak dipaparkan semula apabila keadaan kiraan dikemas kini.
• Jika anda mengklik "Tukar Nama", prop nama berubah, menyebabkan ChildComponent dipaparkan semula.

Output:

• Apabila anda mengklik butang "Kiraan Pertambahan", ChildComponent akan tidak dipaparkan semula, tetapi ia akan log "Komponen kanak-kanak dipaparkan semula" apabila prop nama bertukar.

Perbandingan Tersuai dengan React.memo

Secara lalai, React.memo melakukan perbandingan cetek prop, tetapi anda boleh menyediakan fungsi perbandingan tersuai jika anda memerlukan lebih kawalan ke atas cara prop dibandingkan.

Fungsi perbandingan tersuai harus kembali benar jika komponen seharusnya tidak dipaparkan semula dan palsu jika sepatutnya.

Contoh: Fungsi Perbandingan Tersuai

const ChildComponent = React.memo(
  ({ name, age }) => {
    console.log("Child component re-rendered");
    return <div>Hello, {name}, {age}!</div>;
  },
  (prevProps, nextProps) => {
    // Custom comparison: only re-render if name changes
    return prevProps.name === nextProps.name;
  }
);

function App() {
  const [name, setName] = useState('John');
  const [age, setAge] = useState(30);

  return (
    <div>
      <ChildComponent name={name} age={age} />
      <button onClick={() => setName('Doe')}>Change Name</button>
      <button onClick={() => setAge(age + 1)}>Increment Age</button>
    </div>
  );
}

Dalam contoh ini, ChildComponent hanya akan dipaparkan semula apabila prop nama berubah, walaupun prop umur berubah, terima kasih kepada fungsi perbandingan tersuai.

Bila Perlu Menggunakan React.memo

• Pengoptimuman Prestasi: Jika anda mempunyai komponen berfungsi yang menerima prop dan tidak kerap berubah, React.memo boleh membantu mengelakkan pemaparan yang tidak perlu.
• Perenderan Senarai: Untuk senarai besar yang hanya beberapa elemen berubah, React.memo boleh menjadi sangat berguna. Contohnya, apabila memaparkan senarai item, menghafal setiap komponen item senarai akan menghalang pemaparan semula item yang tidak berubah.
• Komponen Mahal: Jika komponen mempunyai logik pemaparan yang mahal (cth., pengiraan kompleks atau pemaparan data berat), menggunakan React.memo boleh meningkatkan prestasi keseluruhan dengan mengelakkan pengiraan semula yang tidak perlu.

Bila Tidak Menggunakan React.memo

• Komponen Kecil: Untuk komponen kecil dengan sedikit prop, menggunakan React.memo boleh menambah overhed tanpa memberikan peningkatan prestasi yang ketara.
• Kerap Menukar Prop: Jika komponen menerima prop yang kerap berubah, React.memo mungkin tidak menawarkan banyak faedah kerana komponen itu akan dipaparkan semula.
• Logik Perbandingan Kompleks: Logik perbandingan tersuai boleh menjadi lebih mahal daripada hanya membenarkan komponen untuk dipaparkan semula seperti biasa. Hanya gunakan apabila perlu.

Kesimpulan

React.memo ialah alat pengoptimuman yang ringkas namun berkuasa dalam React untuk menghalang pemaparan semula komponen berfungsi yang tidak perlu. Dengan menghafal komponen dan menggunakan perbandingan prop cetek (atau fungsi perbandingan tersuai), React boleh melangkau pemaparan komponen tersebut apabila prop mereka tidak berubah, yang membawa kepada peningkatan prestasi, terutamanya dalam aplikasi yang besar atau kompleks.

Atas ialah kandungan terperinci Memahami React.memo untuk Pengoptimuman Prestasi dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!