Kaçış Yolları

İleri Düzey

Bazı bileşenleriniz React dışındaki sistemleri kontrol etmek ve bu sistemlerle senkronize olmak isteyebilir. Örneğin, tarayıcı API kullanarak bir input alanına odaklanmak, React harici yazılmış bir video oynatıcısını durdurmak ve oynatmak ya da uzaktan bir sunucuya bağlanmak ve mesajları dinlemek isteyebilirsiniz. Bu bölümde, React “dışına çıkmanızı” ve dış sistemlere bağlanmanızı sağlayacak kaçış yollarını öğreneceksiniz. Uygulama mantığınızın ve veri akışınızın çoğu bu özelliklere dayanmamalıdır.

Bu bölümde

Ref ile Değerlere Referans Verme

Bir bileşenin “hatırlamasını” istediğiniz bilgi varsa, ancak bu bilginin yeni render’lar tetiklemesini istemiyorsanız, bir ref kullanabilirsiniz:

const ref = useRef(0);

State’te olduğu gibi ref’lerde yeniden renderlar arasında React tarafından tutulur. Ancak, state’i değiştirmek bileşeni yeniden render eder. Bir ref’i değiştirmek yeniden render’a neden olmaz! Bir ref’in mevcut değerine ref.current özelleğini kullanarak erişebilirsiniz.

Fork

import { useRef } from 'react';

export default function Counter() {
  let ref = useRef(0);

  function handleClick() {
    ref.current = ref.current + 1;
    alert(ref.current + ' defa tıkladınız!');
  }

  return (
    <button onClick={handleClick}>
      Tıkla!
    </button>
  );
}

Ref, bileşeninizin React tarafından takip edilmeyen gizli bir cebi gibidir. Örneğin, ref’leri kullanarak zamanaşımı ID’lerini, DOM elemanlarını ve bileşenin render çıktısını etkilemeyen diğer nesneleri saklayabilirsiniz.

Bu konuyu öğrenmeye hazır mısınız?

Ref ile Değerlere Referans Verme sayfasını okuyarak ref’lerin bilgileri hatırlamada nasıl kullanılacağını öğrenebilirsiniz.

Devamını Oku

Ref’ler ile DOM Manipülasyonu

React, DOM’u render edilen çıktıya uyacak şekilde otomatik olarak günceller. Böylece bileşenlerinizin genellikle onu değiştirmesi gerekmez. Ancak bazen React tarafından yönetilen DOM elemanlarına erişmeye ihtiyaç duyabilirsiniz örneğin bir elemana odaklamak, onu kaydırmak veya boyutunu ve konumunu ölçmek isteyebilirsiniz. React’te bunları yapmanın yerleşik bir yolu yoktur bu yüzden DOM elemanı için ref’e ihtiyacınız olacak. Örneğin, butona tıklamak ref’i kullanarak input alanına odaklanmanızı sağlayacaktır:

Fork

import { useRef } from 'react';

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        İnput alanına odaklan
      </button>
    </>
  );
}

Bu konuyu öğrenmeye hazır mısınız?

Ref’ler ile DOM Manipülasyonu sayfasını okuyarak React tarafından kontrol edilen DOM elemanlarına nasıl erişebileceğinizi öğrenebilirsiniz.

Devamını Oku

Efektler ile Senkronize Etme

Bazı bileşenler harici sistemler ile senkronize olmalıdır. Örneğin, React state’ine göre React olmayan bir bileşeni kontrol etmek, bir sunucu bağlantısı kurmak veya bir bileşen ekranda göründüğünde analiz bilgisi göndermek isteyebilirsiniz. Efektler, bileşeninizi bazı React dışı sistemler ile senkronize etmenizi sağlamak için bazı kodları render işleminden sonra çalıştırır. Efektleri, bileşenlerinizi React dışındaki sistemlerle senkronize etmek için kullanın.

Birkaç kez Oynat/Duraklat düğmesine basın ve video oynatıcısının isPlaying prop değeriyle nasıl senkronize kaldığını görün:

Fork

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

function VideoPlayer({ src, isPlaying }) {
  const ref = useRef(null);

  useEffect(() => {
    if (isPlaying) {
      ref.current.play();
    } else {
      ref.current.pause(