Özet - React.memo

React.memo'lu bir liste öğesi ve useCallback'li parent yazarsın.

Özet - React.memo

Bu grupta React.memo'nun ne olduğunu, prop karşılaştırmasını ve özel karşılaştırıcıyı öğrendin. Artık pahalı bileşenleri gereksiz çizimden koruyabilirsin.

Reçete: büyük liste öğeleri ve pahalı bileşenleri memo ile sar, fonksiyon prop'ları useCallback ile sabitle, nesne prop'ları useMemo ya da modül dışı ile sabitle. Özel karşılaştırıcı yalnızca son çare olarak kullanılır.

Bir sonraki adımda memo'lu liste + useCallback ile büyük bir liste örneği yazacaksın.

Uygulama BigList memo + callback

Aşağıdaki iskeleti tamamla. App bileşeni yaz. useState(["a","b","c"]) ile items tanımla. handleClick'i useCallback((item) => console.log(item), []) ile tanımla. <ul> içinde items.map((item, i) => <li key={ '{ i }' } onClick={ '{ () => handleClick(item) }' }>{ '{ item }' }</li>) çiz. Dışa aktar.

Örnek çözümü göster

import { useState, useCallback } from "react";

function App() {
  const [items] = useState(["a", "b", "c"]);
  const handleClick = useCallback((item) => console.log(item), []);
  return (
    <ul>
      {items.map((item, i) => (
        <li key={i} onClick={() => handleClick(item)}>{item}</li>
      ))}
    </ul>
  );
}

export default App;

Kendini test et

Hangisi React.memo'nun varsayılan karşılaştırmasıdır?
- Sığ
- Derin
- JSON.stringify
- Yok sayar
Cevabı göster

Sığ — Varsayılan sığ karşılaştırmadır.
React.memo reçetesini eşleştir

memo

sar
useCallback

fonksiyon
useMemo

nesne
özel karşılaştırıcı

son çare

Sıradaki ders: Proje: Performans

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler