Ucapkan Selamat Tinggal kepada Re-Render yang Tidak Perlu dengan Memo React: Tutorial Langkah demi Langkah

Memo Reaksi: Meningkatkan Prestasi Reaksi dengan Memoisasi Mudah

pengenalan

Aplikasi React selalunya berurusan dengan set data yang besar dan komponen yang kompleks, di mana pemaparan semula yang tidak perlu boleh memberi kesan ketara kepada prestasi. Untuk menangani perkara ini, React menawarkan React.memo—alat yang ringkas namun berkuasa untuk mengoptimumkan komponen dan mengurangkan masa pemaparan. Dalam panduan ini, kami akan meneroka cara Memo React berfungsi, sebab ia berguna dan cara melaksanakannya langkah demi langkah.

---

Apakah Memo React?

React.memo ialah komponen tertib tinggi (HOC) dalam React yang membantu menghafal komponen berfungsi. Memoisasi ialah proses caching output fungsi berdasarkan inputnya, jadi fungsi itu tidak perlu mengira semula hasil untuk input yang sama. Memo React berfungsi sama: ia "mengingat" keluaran terakhir komponen dan hanya memaparkannya semula apabila propnya berubah.

Mengapa Memo React?

Dalam React, komponen dipaparkan semula setiap kali komponen induknya dipaparkan semula. Ini boleh menyebabkan ketidakcekapan jika output komponen tidak bergantung pada perubahan dalam induknya. Sebagai contoh, dalam UI kompleks dengan banyak komponen, anda mungkin melihat ketinggalan disebabkan oleh pemaparan semula yang berlebihan. Menggunakan Memo React boleh mengoptimumkan ini dengan hanya mengemas kini komponen apabila perlu.

---

Memo Reaksi Masalah Selesai

1. Re-Render yang Tidak Perlu

Apabila komponen induk dipaparkan semula, komponen anaknya juga dipaparkan semula. Ini boleh menyebabkan kesesakan prestasi, terutamanya apabila komponen memaparkan data statik atau bergantung pada prop yang tidak berubah.

2. Prestasi Laggy atau Lambat dalam UI Kompleks

Aplikasi dengan komponen bersarang dalam boleh menghadapi prestasi perlahan disebabkan pemaparan semula terkumpul. Memoisasi, dengan React Memo, membantu menghalang pemaparan semula komponen yang tidak memerlukan kemas kini, meningkatkan tindak balas apl.

---

Cara Memo Reaksi Berfungsi: Contoh Langkah demi Langkah

Mari kita lalui pelaksanaan asas Memo React. Kami akan mulakan dengan komponen mudah yang tidak menggunakan penghafalan dan melihat cara menambah Memo Reaksi membuat perbezaan.

Langkah 1: Sediakan Komponen Kaunter Mudah Tanpa Memo Reaksi

import React, { useState } from 'react';

function Counter({ count }) {
  console.log('Counter component re-rendered');
  return <h1>Count: {count}</h1>;
}

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <Counter count={count} />
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} placeholder="Type something..." />
    </div>
  );
}

export default App;

Penjelasan

Dalam contoh ini, setiap kali anda menaip dalam medan input, komponen Kaunter dipaparkan semula, walaupun nilai kiraan kekal sama. Ini adalah paparan semula yang tidak perlu yang boleh kami cegah dengan Memo React.

Langkah 2: Mengoptimumkan dengan Memo React

Sekarang, mari kita balut komponen Kaunter dengan React.memo untuk mengoptimumkannya.

import React, { useState } from 'react';

function Counter({ count }) {
  console.log('Counter component re-rendered');
  return <h1>Count: {count}</h1>;
}

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <Counter count={count} />
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} placeholder="Type something..." />
    </div>
  );
}

export default App;

Penjelasan

Dengan React.memo, komponen Kaunter hanya dipaparkan semula jika prop kiraannya berubah. Kini, menaip dalam medan input tidak lagi mencetuskan pemaparan semula Counter, mengoptimumkan prestasi dengan ketara.

---

Memo Reaksi dalam Tindakan: Senario Praktikal dengan Senarai

Mari kita menyelami contoh yang lebih kompleks untuk melihat manfaat sebenar Memo React. Katakan kita mempunyai senarai item dengan butang "suka" di sebelah setiap item. Kami akan menunjukkan cara Memo React boleh menghalang paparan semula yang berlebihan apabila menyukai item individu.

Langkah 1: Buat Komponen Senarai Tanpa Memo

import React, { useState } from 'react';

const Counter = React.memo(function Counter({ count }) {
  console.log('Counter component re-rendered');
  return <h1>Count: {count}</h1>;
});

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <Counter count={count} />
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} placeholder="Type something..." />
    </div>
  );
}

export default App;

Masalah

Dalam kod di atas, apabila anda menyukai satu item, semua item dipaparkan semula, walaupun hanya satu item suka berubah.

Langkah 2: Optimumkan Komponen Item dengan Memo React

import React, { useState } from 'react';

function Item({ item, onLike }) {
  console.log(`Rendering ${item.name}`);
  return (
    <div>
      <h2>{item.name}</h2>
      <button onClick={() => onLike(item.id)}>Like</button>
    </div>
  );
}

function ItemList() {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1', likes: 0 },
    { id: 2, name: 'Item 2', likes: 0 },
    { id: 3, name: 'Item 3', likes: 0 },
  ]);

  const handleLike = (id) => {
    setItems((prevItems) =>
      prevItems.map((item) =>
        item.id === id ? { ...item, likes: item.likes + 1 } : item
      )
    );
  };

  return (
    <div>
      {items.map((item) => (
        <Item key={item.id} item={item} onLike={handleLike} />
      ))}
    </div>
  );
}

export default ItemList;

Hasilnya

Kini, hanya item yang anda klik untuk suka akan dipaparkan semula, menjadikan UI lebih pantas dan cekap.

---

Bila hendak menggunakan Memo React?

React Memo berguna dalam senario tertentu, tetapi menggunakannya di mana-mana boleh merumitkan kod anda tanpa menambah faedah sebenar. Berikut ialah beberapa situasi utama di mana ia boleh menjadi sangat berkesan:

1. Komponen Statik: Komponen yang tidak kerap berubah, seperti pengepala atau pengaki.
2. Komponen Fungsian Tulen: Komponen yang bergantung semata-mata pada prop untuk pemaparan.
3. Senarai Besar Komponen: Senarai dengan banyak item yang perlu mengelakkan pemaparan semula yang tidak perlu.

---

Potensi Perangkap dan Amalan Terbaik

1. Perbandingan Cetek: Memo Reaksi melakukan perbandingan cetek, bermakna ia tidak akan mengesan perubahan dalam objek atau tatasusunan bersarang dalam. Pertimbangkan untuk menggunakan useMemo atau useCallback jika anda menghantar prop yang kompleks.

2. Pemantauan Prestasi: Gunakan React DevTools untuk mengenal pasti komponen yang sebenarnya mendapat manfaat daripada penghafalan. Menggunakan Memo React secara berlebihan boleh membawa kepada kerumitan kod dengan keuntungan prestasi yang boleh diabaikan.

---

Soalan Lazim (FAQ)

S1: Bagaimanakah Memo React Berbeza daripada useMemo dan useCallback?

• Memo Reaksi mengoptimumkan pemaparan semula komponen berdasarkan prop.
• useMemo menyimpan cache nilai yang dikira dalam komponen.
• useCallback menyimpan fungsi cache, menghalangnya daripada dicipta semula pada setiap paparan.

S2: Bolehkah saya Menggunakan Memo React dengan Komponen Kelas?

Tidak, React Memo hanya untuk komponen berfungsi. Walau bagaimanapun, untuk komponen kelas, tingkah laku yang serupa boleh dicapai dengan PureComponent.

---

Kesimpulan

React Memo ialah alat berharga untuk mengurangkan pemaparan semula yang tidak perlu dan meningkatkan prestasi aplikasi React. Dengan menggunakannya secara terpilih pada komponen berfungsi tulen atau elemen UI statik, anda boleh mengoptimumkan apl React anda tanpa merumitkan strukturnya. Ikut langkah ini, cuba contoh dan teruskan percubaan untuk mencari strategi hafalan terbaik untuk projek anda!

Atas ialah kandungan terperinci Ucapkan Selamat Tinggal kepada Re-Render yang Tidak Perlu dengan Memo React: Tutorial Langkah demi Langkah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!