React.Component — sınıf bileşenleri ve nasıl çalışır

React.Component Nedir?

React.Component, durum, prop'lar ve bileşen yaşam döngüsü ile çalışmak için yerleşik metotlar sağlayan soyut bir sınıftır. Bir sınıf bileşeni oluşturmak için, React.Component'i genişleten bir sınıf tanımlamanız ve render metotunu uygulamanız gerekir.

React.Component, React'in ilk sürümünde (2013) ortaya çıktı ve beş yıl boyunca bileşen oluşturmanın birincil yolu olarak kaldı. React ekosistemi sınıflar etrafında inşa edildi: yüksek dereceli bileşenler (HOC), render props, bağlam — tüm bu desenler sınıf sözdizimi kullanılarak uygulandı.

2019'da React 16.8'in piyasaya sürülmesiyle, React ekibi sınıflara alternatif olarak hook'ları tanıttı. Hook'lar aynı sorunları — durum, efektler, bağlam — çözdü, ancak kalıtım ve karmaşık bağlam bağlaması olmadan. React.Component tamamen desteklenmeye devam ediyor, ancak yeni projeler için fonksiyonel yaklaşım önerilmektedir.

Sınıf Bileşeni Oluşturma

En küçük sınıf bileşeni, bir React öğesi döndüren tek bir render metotuna sahip bir sınıftır. render tek zorunlu metottur. this.props ve this.state'in saf bir fonksiyonu olmalıdır: aynı prop ve durum kümesi aynı sonucu üretir.

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Kurucu ve Durum Başlatma

Kurucu, montajdan önce çalıştırılır. Prop'ları üst sınıfa iletmek için super(props) çağrısını yapar ve this.state'i başlatır. Kurucuyu başka amaçlar için — abonelikler, API çağrıları — kullanmak önerilmez; bunun için componentDidMount vardır.

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return <p>Count: {this.state.count}</p>;
  }
}

this.state ve this.setState ile Durum Yönetimi

this.state, bileşenin verilerini içeren bir nesnedir. Doğrudan değiştirmek (this.state.count = 1) yasaktır — yeniden render tetiklemez ve öngörülebilirliği bozar. Durum, yeni bir durum nesnesi oluşturan ve yeniden render tetikleyen this.setState aracılığıyla güncellenmelidir.

setState bir nesne veya fonksiyon kabul edebilir. Yeni durum öncekine bağlı olduğunda fonksiyonel form tercih edilir: this.setState(prev => ({ count: prev.count + 1 })). React, performans optimizasyonu için birden çok setState çağrısını tek bir toplu işlemde gruplayabilir.

class Toggle extends Component {
  constructor(props) {
    super(props);
    this.state = { isOn: false };
  }

  handleClick() {
    this.setState(prev => ({ isOn: !prev.isOn }));
  }

  render() {
    return (
      <button onClick={() => this.handleClick()}>
        {this.state.isOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

setState'in önemli bir özelliği, asenkron olmasıdır. setState'i çağırdıktan sonra durum hemen güncellenmez. Güncellemeden sonra bir eylem gerçekleştirmeniz gerekiyorsa, ikinci argüman olarak bir geri çağrı iletin: this.setState(newState, () => console.log(this.state)).

Yaşam Döngüsü Metotları

Sınıf bileşenleri, React'in belirli anlarda çağırdığı önceden tanımlanmış metotlara sahiptir. Montaj — constructor → render → componentDidMount. Güncelleme — render → componentDidUpdate. Montajdan Çıkarma — componentWillUnmount.

ComponentDidMount — Veri Getirme

componentDidMount, ilk renderdan sonraki yan etkiler için ana yerdir. Burada HTTP istekleri yapılır, WebSocket bağlantıları kurulur ve zamanlayıcılar başlatılır. componentWillUnmount'ta aboneliği temizlemezseniz, bellek sızıntısı oluşur.

class UserProfile extends Component {
  componentDidMount() {
    fetch(`/api/users/${this.props.userId}`)
      .then(res => res.json())
      .then(data => this.setState({ user: data }));
  }

  componentWillUnmount() {
    // Cancel request on unmount
  }

  render() {
    return <div>{this.state.user?.name}</div>;
  }
}

Metotlarda this Bağlamını Bağlama

JavaScript'te, sınıf metotları varsayılan olarak örneğe bağlı değildir. Bir metodu geri çağrı olarak iletirseniz — bir olay işleyiciye, bir zamanlayıcıya — this undefined (katı modda) veya window (katı mod olmadan) olur. Bağlama olmadan, this.setState hata fırlatır.

Bağlamanın üç yolu vardır: kurucuda bind, geri çağrıda ok fonksiyonu ve ok fonksiyonu ile class field. İlk yöntem React'in resmi önerisidir: kurucuda bir kez bağlayın, her renderda fonksiyonu yeniden oluşturmadan.

// Method 1: bind in constructor (recommended)
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ clicked: true });
  }

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

Class fields — otomatik bağlama ile modern sözdizimi. Bir sınıf özelliğindeki ok fonksiyonu, kurucunun kapsamından this'i yakalar. Dezavantajı, metotun prototip yerine her örnekte oluşturulmasıdır, bu da aynı türden yüzlerce bileşen için bellek kullanımını artırır.

Sınıf vs Fonksiyonel Bileşenler

Sınıf ve fonksiyon arasındaki seçim yalnızca sözdizimi meselesi değildir. Hook'lu fonksiyonel bileşenler, sınıflara özgü sorunları çözer: farklı yaşam döngüsü metotlarında (componentDidMount + componentDidUpdate) mantık tekrarı, this ile karmaşıklık ve ilgili mantığı yeniden kullanılabilir bir bloğa çıkaramama.

Fonksiyonel bileşenlerin test edilmesi daha kolaydır — iç durumları yoktur (hook'lardan önce yalnızca sınıflarda mevcuttu) ve geri çağrıları doğrulamak için DOM montajı gerektirmezler. React, tüm yeni projeler için fonksiyonel bileşenleri önerir; dokümantasyon ve örnekler onlarla yazılır.

Sınıf bileşenleri, eski kod ile çalışırken en iyi seçim olmaya devam eder. Bir proje 2019'dan önce başlatıldıysa, muhtemelen binlerce sınıf bileşeni içerir. Hepsini tek bir sprintte hook'lara yeniden yazmak risklidir. React geriye dönük uyumluluğu garanti eder: sınıf bileşenleri kaldırılmayacaktır.

Sınıflardan Hook'lara Göç Stratejisi

Aşamalı göç, bileşenin analiziyle başlar. Durumsuz basit bileşenler önce dönüştürülür — bunlar kolayca fonksiyonlarla değiştirilir. Ardından — bir veya iki durum alanı olan bileşenler, burada useState doğrudan this.state ve this.setState'in yerini alır.

Birden çok yaşam döngüsü metotuna sahip karmaşık bileşenler useEffect kullanılarak dönüştürülür. componentDidMount + componentDidUpdate'teki mantık, farklı bağımlılıklarla ayrı useEffect çağrılarına bölünür. componentWillUnmount, useEffect içinde bir dönüş fonksiyonuyla değiştirilir. Karmaşık durum mantığı için useReducer kullanın.

Otomatik göç araçları — @phenomnomnominal/ts-react-class-to-hook veya codemod script'leri — basit sınıfları otomatik olarak dönüştürebilir. Karmaşık durumlarda, göç, kaynak bileşenin mantığını anlamayı gerektiren manuel bir iş olarak kalır.