React’te Ref’ler Kullanarak Ebeveyn-Çocuk İletişimi

İyi yapılandırılmış React uygulamaları oluşturmak için ana ve alt bileşenler arasındaki iletişimin verimli bir şekilde yönetilmesi çok önemlidir. Props çoğu veri akışı için tercih edilen yöntem olsa da, ana bileşenin alt bileşen içindeki bir işlevi doğrudan çağırması gereken durumlar ortaya çıkar. Bu makale, en iyi uygulamalara odaklanarak ve ihtiyatlı ref kullanımının önemini vurgulayarak, bunu ref’ler kullanarak nasıl başaracağınızı ele almaktadır.

İçerik Tablosu

• React’te Ref’leri Anlamak
• Ana Sınıf Bileşenlerinden Alt Bileşen Fonksiyonlarını Çağırma
• Ana Fonksiyonel Bileşenlerinden Alt Bileşen Fonksiyonlarını Çağırma
• En İyi Uygulamalar ve Alternatifler

React’te Ref’leri Anlamak

Ref’ler, DOM elementlerine veya bileşen örneklerine doğrudan erişim sağlamanın bir yolunu sunar. React bileşeninin veri akışının bir parçası değildir ve az kullanılmalıdır. Alt bileşenlere doğrudan erişim sağlasalar da, aşırı kullanımı daha az sürdürülebilir ve test edilmesi daha zor kodlara yol açabilir. Tipik ana-alt iletişimi için mümkün olduğunca props kullanmaya öncelik verin.

Ana Sınıf Bileşenlerinden Alt Bileşen Fonksiyonlarını Çağırma

Sınıf bileşenlerinde, bir ref oluşturmak ve onu alt bileşene atamak için React.createRef() kullanırız. Ana bileşen daha sonra alt bileşenin örneğine erişir ve yöntemini çağırır.

// ChildComponent.js
import React from 'react';

class ChildComponent extends React.Component {
  myChildFunction = () => {
    console.log('Alt bileşen fonksiyonu çağrıldı!');
  };

  render() {
    return <button onClick={this.myChildFunction}>Tıkla</button>;
  }
}

export default ChildComponent;

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  callChildFunction = () => {
    if (this.childRef.current) {
      this.childRef.current.myChildFunction();
    }
  };

  render() {
    return (
      <div>
        <button onClick={this.callChildFunction}>Alt Bileşen Fonksiyonunu Çağır</button>
        <ChildComponent ref={this.childRef} />
      </div>
    );
  }
}

export default ParentComponent;

Ana Fonksiyonel Bileşenlerinden Alt Bileşen Fonksiyonlarını Çağırma

Fonksiyonel bileşenler benzer işlevsellik için useRef hook’unu kullanır. useRef hook’u, .current özelliği null olarak başlatılan ve render’lar arasında kalıcı olan değiştirilebilir bir nesne döndürür.

// ParentComponent.js
import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const childRef = useRef(null);

  const callChildFunction = () => {
    if (childRef.current) {
      childRef.current.myChildFunction();
    }
  };

  return (
    <div>
      <button onClick={callChildFunction}>Alt Bileşen Fonksiyonunu Çağır</button>
      <ChildComponent ref={childRef} />
    </div>
  );
}

export default ParentComponent;

En İyi Uygulamalar ve Alternatifler

Ref’ler doğrudan erişim sağlasa da, kodu test etmeyi ve anlamaya çalışmayı zorlaştırırlar. Ref’lere başvurmadan önce bu alternatifleri göz önünde bulundurun:

• Geri Çağırma Fonksiyonları (Callbacks): Ana bileşenden alt bileşene prop olarak bir fonksiyon geçirin. Alt bileşen gerektiğinde bu fonksiyonu çağırır ve gerekli tüm verileri ana bileşene geri gönderir.
• Durum Yönetimi Kütüphaneleri: Redux veya Context API gibi kütüphaneler, veri akışını ve bileşen iletişimini yönetmenin daha yapılandırılmış yollarını sağlayarak uygulamanızın daha kolay sürdürülmesini ve ölçeklenmesini sağlar.
• Özel Olaylar: Alt bileşenden özel olaylar gönderin ve ana bileşende bunları dinleyin.

Ref’leri ihtiyatlı kullanmayı unutmayın. Mümkün olduğunca daha temiz ve daha tahmin edilebilir veri akışı mekanizmalarına öncelik verin.