API Referansı
Eski React API'ları

PureComponent

Tuzak

Bileşenleri sınıf yerine fonksiyon olarak tanımlamanızı öneririz. Nasıl taşınacağını görün.

PureComponent, Component ile benzerdir ancak aynı prop’lar ve state için yeniden renderlamayı atlar. Sınıf bileşenleri hâlâ React tarafından desteklenmektedir, ancak yeni kodda kullanılmasını önermiyoruz.

class Greeting extends PureComponent {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

Başvuru Dokümanı

PureComponent

Aynı prop’lar ve state için bir sınıf bileşeninin yeniden renderlanmasını atlamak istiyorsanız, Component yerine PureComponent’ı genişletin:

import { PureComponent } from 'react';

class Greeting extends PureComponent {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

PureComponent, Component’ın bir alt sınıfıdır ve tüm Component API’lerini destekler. PureComponent’ı genişletmek, prop’ları ve state’i yüzeysel (shallow) olarak karşılaştıran özel bir shouldComponentUpdate metodu tanımlamakla eşdeğerdir.

Aşağıda daha fazla örneğe bakın.

Kullanım

Sınıf bileşenlerinde gereksiz yeniden renderlamaları atlama

React normalde üst bileşen her yeniden renderlandığında alt bileşeni de yeniden renderlar. Bir optimizasyon olarak, yeni prop’ları ve state’i eski prop’lar ve state ile aynı olduğu sürece üst bileşen yeniden renderlandığında React’in yeniden renderlamayacağı bir bileşen oluşturabilirsiniz. Sınıf bileşenleri, PureComponent’ı genişleterek bu davranışı tercih edebilir:

class Greeting extends PureComponent {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

Bir React bileşeni her zaman saf renderlama mantığına sahip olmalıdır. Bu, prop’ları, state’i ve context’i değişmediyse aynı çıktıyı döndürmesi gerektiği anlamına gelir. PureComponent kullanarak, React’e bileşeninizin bu gereksinime uyduğunu söylemiş olursunuz; böylece React, prop’ları ve state’i değişmediği sürece yeniden renderlama yapmak zorunda kalmaz. Ancak bileşeniniz, kullandığı bir context değişirse yine de yeniden renderlanır.

Bu örnekte, Greeting bileşeninin name değiştiğinde yeniden renderlandığına (çünkü bu, prop’larından biridir), ancak address değiştiğinde yeniden renderlanmadığına dikkat edin (çünkü Greeting’e prop olarak iletilmemektedir):

import { PureComponent, useState } from 'react';

class Greeting extends PureComponent {
  render() {
    console.log("Greeting was rendered at", new Date().toLocaleTimeString());
    return <h3>Hello{this.props.name && ', '}{this.props.name}!</h3>;
  }
}

export default function MyApp() {
  const [name, setName] = useState('');
  const [address, setAddress] = useState('');
  return (
    <>
      <label>
        Name{': '}
        <input value={name} onChange={e => setName(e.target.value)} />
      </label>
      <label>
        Address{': '}
        <input value={address} onChange={e => setAddress(e.target.value)} />
      </label>
      <Greeting name={name} />
    </>
  );
}

Tuzak

Bileşenleri sınıf yerine fonksiyon olarak tanımlamanızı öneririz. Nasıl taşınacağını görün.

Alternatifler

Bir PureComponent sınıf bileşeninden fonksiyona geçiş

Yeni kodda sınıf bileşenleri yerine fonksiyon bileşenlerini kullanmanızı öneririz. PureComponent kullanan mevcut sınıf bileşenleriniz varsa, bunları nasıl dönüştürebileceğiniz aşağıda açıklanmıştır. İşte orijinal kod:

import { PureComponent, useState } from 'react';

class Greeting extends PureComponent {
  render() {
    console.log("Greeting was rendered at", new Date().toLocaleTimeString());
    return <h3>Hello{this.props.name && ', '}{this.props.name}!</h3>;
  }
}

export default function MyApp() {
  const [name, setName] = useState('');
  const [address, setAddress] = useState('');
  return (
    <>
      <label>
        Name{': '}
        <input value={name} onChange={e => setName(e.target.value)} />
      </label>
      <label>
        Address{': '}
        <input value={address} onChange={e => setAddress(e.target.value)} />
      </label>
      <Greeting name={name} />
    </>
  );
}

Bu bileşeni sınıftan fonksiyona dönüştürdüğünüzde, memo ile sarmalayın:

import { memo, useState } from 'react';

const Greeting = memo(function Greeting({ name }) {
  console.log("Greeting was rendered at", new Date().toLocaleTimeString());
  return <h3>Hello{name && ', '}{name}!</h3>;
});

export default function MyApp() {
  const [name, setName] = useState('');
  const [address, setAddress] = useState('');
  return (
    <>
      <label>
        Name{': '}
        <input value={name} onChange={e => setName(e.target.value)} />
      </label>
      <label>
        Address{': '}
        <input value={address} onChange={e => setAddress(e.target.value)} />
      </label>
      <Greeting name={name} />
    </>
  );
}

Not

PureComponent’ın aksine, memo eski ve yeni state’i karşılaştırmaz. Fonksiyon bileşenlerinde, set fonksiyonunu aynı state ile çağırmak, memo olmadan bile varsayılan olarak yeniden renderlamayı önler.

ÖncekiisValidElement