React Ref'leri: Global Geliştiriciler İçin useRef ve createRef'i Anlamak

React geliştirme dünyasında, bileşen durumunu verimli bir şekilde yönetmek ve Belge Nesne Modeli (DOM) ile etkileşimde bulunmak çok önemlidir. React Ref'leri, DOM öğelerine veya React bileşenlerine doğrudan erişmek ve bunları değiştirmek için bir mekanizma sağlar. Ref'ler oluşturmak için iki temel yöntem useRef ve createRef'tir. Her ikisi de Ref oluşturma amacına hizmet etse de, uygulama ve kullanım durumları bakımından farklılık gösterirler. Bu kılavuz, bu iki yaklaşımı anlaşılır hale getirmeyi, özellikle global bir kitle için geliştirme yaparken, React projelerinizde her birini ne zaman ve nasıl etkili bir şekilde kullanacağınız konusunda netlik sağlamayı amaçlamaktadır.

React Ref'lerini Anlamak

Ref (referansın kısaltması), bir DOM düğümüne veya bir React bileşenine doğrudan erişmenizi sağlayan bir React özelliğidir. Bu özellikle şu durumlarda kullanışlıdır:

• Bir giriş alanına odaklanmak gibi bir DOM öğesini doğrudan manipüle etmek.
• Bir alt bileşenin yöntemlerine veya özelliklerine erişmek.
• Yeniden render'lara neden olmadan render'lar arasında kalıcı olan değerleri yönetmek (sınıf bileşenlerindeki örnek değişkenlerine benzer).

React, kullanıcı arayüzünün durum ve özellikler aracılığıyla yönetildiği bildirimsel bir yaklaşımı teşvik ederken, doğrudan manipülasyonun gerekli olduğu durumlar vardır. Ref'ler, React'in bildirimsel doğası ile zorunlu DOM işlemleri arasındaki boşluğu kapatmanın bir yolunu sağlar.

createRef: Sınıf Bileşeni Yaklaşımı

createRef, React tarafından sağlanan bir yöntemdir. Öncelikle sınıf bileşenleri içinde Ref'ler oluşturmak için kullanılır. Bir sınıf bileşeni her örneklendiğinde, createRef yeni bir Ref nesnesi oluşturur. Bu, bileşenin her örneğinin kendi benzersiz Ref'ine sahip olmasını sağlar.

Sözdizimi ve Kullanım

createRef'i kullanmak için, önce sınıf bileşeninizde, tipik olarak yapılandırıcıda bir Ref bildirirsiniz. Ardından, ref özniteliğini kullanarak Ref'i bir DOM öğesine veya bir bileşene eklersiniz.

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

  componentDidMount() {
    // Bileşen bağlandıktan sonra DOM öğesine erişin
    this.myRef.current.focus();
  }

  render() {
    return ;
  }
}

Bu örnekte, this.myRef, React.createRef() kullanılarak oluşturulur. Daha sonra, giriş öğesinin ref özniteliğine atanır. Bileşen bağlandıktan sonra (componentDidMount içinde), this.myRef.current kullanarak gerçek DOM düğümüne erişebilir ve üzerinde işlemler gerçekleştirebilirsiniz (bu durumda, giriş alanına odaklanma).

Örnek: Bir Giriş Alanına Odaklanma

Bir bileşen bağlandığında otomatik olarak bir giriş alanına odaklanmak istediğiniz bir senaryo düşünelim. Bu, özellikle formlarda veya etkileşimli öğelerde Ref'ler için yaygın bir kullanım durumudur.

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

  componentDidMount() {
    this.inputRef.current.focus();
  }

  render() {
    return (
      

        
      
    );
  }
}

Bu örnekte, FocusInput bağlandıktan hemen sonra giriş alanına odaklanır. Bu, kullanıcının dikkatini bileşen oluşturulur oluşturulmaz giriş öğesine yönlendirerek kullanıcı deneyimini iyileştirebilir.

createRef ile İlgili Önemli Hususlar

• Yalnızca Sınıf Bileşenleri: createRef, sınıf bileşenlerinde kullanılmak üzere tasarlanmıştır. Teknik olarak işlevsel bileşenlerde çalışabilse de, amaçlanan kullanım bu değildir ve beklenmedik davranışlara yol açabilir.
• Her Örnekte Yeni Ref: Bir sınıf bileşeninin her örneği kendi createRef'ine sahip olur. Bu, bileşen örnekleri arasındaki izolasyonu korumak için önemlidir.

useRef: İşlevsel Bileşen Kancası

useRef, React 16.8'de tanıtılan bir Kancadır. İşlevsel bileşenler içinde değiştirilebilir Ref nesneleri oluşturmanın bir yolunu sağlar. createRef'in aksine, useRef bileşen her render edildiğinde aynı Ref nesnesini döndürür. Bu, yeniden render'ları tetiklemeden değerleri render'lar arasında kalıcı hale getirmek için idealdir.

Sözdizimi ve Kullanım

useRef'i kullanmak basittir. useRef Kancasını çağırır ve bir başlangıç değeri geçirirsiniz. Kanca, değeri erişmek ve değiştirmek için kullanabileceğiniz bir .current özelliği olan bir nesne döndürür.

import React, { useRef, useEffect } from 'react';

function MyFunctionalComponent() {
  const myRef = useRef(null);

  useEffect(() => {
    // Bileşen bağlandıktan sonra DOM öğesine erişin
    if (myRef.current) {
      myRef.current.focus();
    }
  }, []);

  return ;
}

Bu örnekte, useRef(null), başlangıç değeri null olan bir Ref oluşturur. useEffect Kancası, bileşen bağlandıktan sonra DOM öğesine erişmek için kullanılır. myRef.current özelliği, giriş öğesine olan referansı tutar ve ona odaklanmanızı sağlar.

Örnek: Önceki Prop Değerlerini İzleme

useRef için güçlü bir kullanım durumu, bir prop'un önceki değerini izlemektir. Ref'lerdeki değişiklikler yeniden render'ları tetiklemediğinden, kullanıcı arayüzünü etkilemeden render'lar arasında kalıcı hale getirmek istediğiniz değerleri depolamak için bunları kullanabilirsiniz.

import React, { useRef, useEffect } from 'react';

function PreviousValueComponent({ value }) {
  const previousValue = useRef();

  useEffect(() => {
    previousValue.current = value;
  }, [value]);

  return (
    

      
Geçerli Değer: {value}
      
Önceki Değer: {previousValue.current}
    
  );
}

Bu örnekte, previousValue.current, value prop'unun önceki değerini depolar. useEffect Kancası, value prop'u her değiştiğinde Ref'i günceller. Bu, geçerli ve önceki değerleri karşılaştırmanıza olanak tanır, bu da değişiklikleri tespit etmek veya animasyonları uygulamak için yararlı olabilir.

useRef ile İlgili Önemli Hususlar

• Yalnızca İşlevsel Bileşenler: useRef bir Kancadır ve yalnızca işlevsel bileşenler veya özel Kancalar içinde kullanılabilir.
• Render'lar Arasında Kalıcıdır: useRef Kancası, her render'da aynı Ref nesnesini döndürür. Bu, yeniden render'ları tetiklemeden değerleri kalıcı hale getirme yeteneğinin anahtarıdır.
• Değiştirilebilir .current Özelliği: Ref nesnesinin .current özelliğini doğrudan değiştirebilirsiniz.
• Başlangıç Değeri: useRef'e bir başlangıç değeri sağlayabilirsiniz. Bu değer, bileşen ilk render edildiğinde .current özelliğine atanır.
• Yeniden Render Yok: Bir Ref'in .current özelliğini değiştirmek, bir bileşen yeniden render'ına neden olmaz.

useRef ve createRef: Ayrıntılı Bir Karşılaştırma

Şimdi hem useRef'i hem de createRef'i ayrı ayrı incelediğimize göre, temel farklılıklarını ve ne zaman birini diğerine tercih edeceğinizi vurgulamak için yan yana karşılaştıralım.

Özellik	useRef	createRef
Bileşen Türü	İşlevsel Bileşenler	Sınıf Bileşenleri
Kanca veya Yöntem	Kanca	Yöntem
Ref Örneği	Her render'da aynı Ref nesnesini döndürür	Bileşenin her örneğinde yeni bir Ref nesnesi oluşturur
Kullanım Durumları	DOM öğelerine erişme Yeniden render'ları tetiklemeden değerleri render'lar arasında kalıcı hale getirme Önceki prop değerlerini izleme Yeniden render'lara neden olmayan değiştirilebilir değerleri depolama	DOM öğelerine erişme Alt bileşen yöntemlerine erişme

Doğru Ref'i Seçme: Bir Karar Rehberi

useRef ve createRef arasında seçim yapmanıza yardımcı olacak basit bir kılavuz:

• İşlevsel bir bileşenle mi çalışıyorsunuz? useRef kullanın.
• Sınıf bileşeniyle mi çalışıyorsunuz? createRef kullanın.
• Yeniden render'ları tetiklemeden bir değeri render'lar arasında kalıcı hale getirmeniz mi gerekiyor? useRef kullanın.
• Bir prop'un önceki değerini izlemeniz mi gerekiyor? useRef kullanın.

DOM Manipülasyonunun Ötesinde: Ref'ler İçin Gelişmiş Kullanım Durumları

DOM öğelerine erişmek ve bunları manipüle etmek Ref'ler için birincil kullanım durumu olsa da, bu temel işlevselliğin ötesinde olasılıklar sunarlar. Ref'lerin özellikle yararlı olabileceği bazı gelişmiş senaryoları keşfedelim.

1. Alt Bileşen Yöntemlerine Erişme

Ref'ler, alt bileşenlerde tanımlanan yöntemlere erişmek için kullanılabilir. Bu, bir üst bileşenin eylemleri tetiklemesini veya doğrudan alt öğelerinden veri almasını sağlar. Bu yaklaşım, alt bileşenler üzerinde hassas kontrol ihtiyacınız olduğunda özellikle yararlıdır.

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

  handleClick = () => {
    // Alt bileşende bir yöntemi çağırın
    this.childRef.current.doSomething();
  };

  render() {
    return (
      

        
        Alt Eylemi Tetikle
      
    );
  }
}

class ChildComponent extends React.Component {
  doSomething = () => {
    console.log('Alt bileşen eylemi tetiklendi!');
  };

  render() {
    return 
Bu bir alt bileşendir.
;
  }
}

Bu örnekte, ParentComponent, ChildComponent'e erişmek ve doSomething yöntemini çağırmak için bir Ref kullanır.

2. Odağı ve Seçimi Yönetme

Ref'ler, giriş alanları ve diğer etkileşimli öğeler içinde odağı ve seçimi yönetmek için çok değerlidir. Bu, erişilebilir ve kullanıcı dostu arayüzler oluşturmak için çok önemlidir.

import React, { useRef, useEffect } from 'react';

function FocusOnMount() {
  const inputRef = useRef(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
      inputRef.current.select(); // Girişteki metni seçin
    }
  }, []);

  return ;
}

Bu örnek, bileşen bağlandığı anda girişe odaklanır ve metnini seçer.

3. Öğeleri Canlandırma

Ref'ler, DOM'u doğrudan manipüle etmek ve karmaşık animasyonlar oluşturmak için animasyon kitaplıklarıyla (GreenSock veya Framer Motion gibi) birlikte kullanılabilir. Bu, animasyon dizileri üzerinde hassas kontrol sağlar.

Basitlik için vanilla JavaScript kullanılarak örnek:

import React, { useRef, useEffect } from 'react';

function AnimatedBox() {
  const boxRef = useRef(null);

  useEffect(() => {
    const box = boxRef.current;
    if (box) {
      // Basit animasyon: kutuyu sağa hareket ettirin
      box.animate(
        [
          { transform: 'translateX(0)' },
          { transform: 'translateX(100px)' },
        ],
        {
          duration: 1000, // 1 saniye
          iterations: Infinity, // Sonsuza kadar tekrarla
          direction: 'alternate',
        }
      );
    }
  }, []);

  return 
;
}

Bu örnek, basit bir kutuyu canlandırmak ve yatay olarak ileri geri hareket ettirmek için Web Animations API'sini kullanır.

Global Uygulamalarda React Ref'lerini Kullanmak İçin En İyi Uygulamalar

Global bir kitle için React uygulamaları geliştirirken, Ref'lerin uluslararasılaştırma (i18n) ve yerelleştirme (l10n) ile nasıl etkileşimde bulunduğunu dikkate almak önemlidir. İşte bazı en iyi uygulamalar:

1. Erişilebilirlik (A11y)

Ref kullanımınızın erişilebilirliği olumsuz etkilemediğinden emin olun. Örneğin, öğelere programlı olarak odaklanırken, kullanıcının odak sırasını ve odak değişikliğinin ekran okuyucular ve klavye kullanıcıları için uygun olup olmadığını göz önünde bulundurun.

import React, { useRef, useEffect } from 'react';

function AccessibleFocus() {
  const buttonRef = useRef(null);

  useEffect(() => {
    const button = buttonRef.current;
    if (button) {
      // Yalnızca düğme kullanıcı tarafından zaten odaklanılmamışsa odaklanın
      if (document.activeElement !== button) {
        button.focus();
      }
    }
  }, []);

  return Bana Tıkla;
}

2. Uluslararasılaştırılmış Giriş Alanları

Giriş alanlarıyla çalışırken, farklı dillerde kullanılan farklı giriş yöntemlerini ve karakter kümelerini unutmayın. Ref tabanlı manipülasyonlarınızın (örneğin, seçim, imleç konumu) çeşitli giriş türlerinde ve yerel ayarlarda doğru çalıştığından emin olun. Bileşenlerinizi farklı dillerde ve giriş yöntemlerinde iyice test edin.

3. Sağdan Sola (RTL) Düzenler

Uygulamanız RTL dillerini (örneğin, Arapça, İbranice) destekliyorsa, Ref'leri kullanarak yaptığınız DOM manipülasyonlarının ters çevrilmiş düzeni hesaba kattığından emin olun. Örneğin, öğeleri canlandırırken, RTL dilleri için animasyon yönünü ters çevirmeyi düşünün.

4. Performans Hususları

Ref'ler DOM ile etkileşimde bulunmanın güçlü bir yolunu sağlarken, aşırı kullanım performans sorunlarına yol açabilir. Doğrudan DOM manipülasyonu, React'in sanal DOM'unu ve uzlaştırma sürecini atlar ve potansiyel olarak tutarsızlıklara ve daha yavaş güncellemelere yol açar. Ref'leri dikkatli ve yalnızca gerektiğinde kullanın.

Sonuç

React Ref'leri, özellikle useRef ve createRef, React geliştiricileri için temel araçlardır. Her yaklaşımın nüanslarını anlamak ve bunları ne zaman etkili bir şekilde uygulayacağınızı bilmek, sağlam ve yüksek performanslı uygulamalar oluşturmak için çok önemlidir. createRef, her örneğin benzersiz Ref'ine sahip olmasını sağlayarak sınıf bileşenleri içindeki Ref'leri yönetmek için standart olmaya devam ediyor. useRef, render'lar arasında kalıcı doğasıyla, işlevsel bileşenler için idealdir ve DOM öğelerini yönetmenin ve gereksiz yeniden render'ları tetiklemeden değerleri kalıcı hale getirmenin bir yolunu sunar. Bu araçları akıllıca kullanarak, erişilebilir ve yüksek performanslı arayüzlerle global bir kitleye hitap ederek React uygulamalarınızın işlevselliğini ve kullanıcı deneyimini geliştirebilirsiniz.

React gelişmeye devam ederken, bu temel kavramlarda uzmanlaşmak, coğrafi ve kültürel sınırları aşan yenilikçi ve kullanıcı dostu web deneyimleri yaratmanızı sağlayacaktır. Gerçekten global uygulamalar sunmak için erişilebilirliğe, uluslararasılaştırmaya ve performansa öncelik vermeyi unutmayın.