Referans

useRef(initialValue)

Bir tanımlamak için useRef’i bileşeninizin en üst seviyesinde çağırın.

Parametreler

  • initialValue: Ref nesnesinin current özelliğinin başlangıçta olmasını istediğiniz değer. Herhangi türde bir değer olabilir. Bu argüman, ilk render işleminden sonra göz ardı edilir.

Geri Dönüş Değeri

useRef, tek bir özelliğe sahip bir nesne döndürür:

  • current: Başlangıçta, verdiğiniz initialValue değerine ayarlanır. Daha sonra başka bir şeye ayarlayabilirsiniz. Eğer ref nesnesini bir JSX elemanına ref özelliği olarak verirseniz, React current özelliğini tanımlayacaktır.

Sonraki render işlemlerinde, useRef aynı nesneyi döndürecektir.

Dikkat edilmesi gerekenler

  • ref.current özelliğini değiştirebilirsiniz. State’in aksine, bu değiştirilebilirdir. Ancak, render için kullanılan bir nesne tutuyorsa (örneğin, State’inizin bir parçası), o nesneyi değiştirmemelisiniz.
  • ref.current özelliğini değiştirdiğinizde, React bileşeninizi yeniden render etmez. Ref, düz JavaScript bir nesne olduğundan, ne zaman değiştirdiğinizi React fark etmez.
  • Bileşeninizin davranışını öngörülemez hale getireceğinden render işlemi sırasında, ref.current’e yazmayın veya okumayın. Ancak yapabilirsiniz.
  • Strict Mode’da, React bileşeninizi iki kez çağıracaktır. Bu sadece geliştirme ortamı için geçerli bir davranıştır ve canlı ortamı etkilemez. Her bir ref nesnesi iki kez oluşturulacak, ancak bunlardan biri atılacaktır. Eğer bileşen fonksiyonunuz saf ise (olması gerektiği gibi), bu, davranışı etkilememelidir

Kullanım

Ref ile bir değeri referans gösterme

Bir veya daha fazla tanımlamak için bileşeninizin en üstünde useRef’i çağırın.

useRef başlangıçta verdiğiniz başlangıç değeri tanımlanmış bir şekilde sadece current özelliğine sahip bir ref nesnesi döndürür.

Sonraki render işlemlerinde, useRef aynı nesneyi döndürecektir. current özelliğini değiştirerek bilgi saklayabilir ve daha sonra okuyabilirsiniz. Bu size özelliğini hatırlatabilir, ancak önemli bir fark var.

Bir ref’i değiştirmek yeniden render işlemine neden olmaz. Bu, ref’lerin bileşeninizin görsel çıktısını etkilemeyen bilgileri saklamak için mükemmel olduğu anlamına gelir. Örneğin, bir saklamak ve daha sonra geri almak istiyorsanız, bunu bir ref içine koyabilirsiniz. Ref içindeki değeri güncellemek için, current özelliğini manuel olarak değiştirmeniz gerekir:

Daha sonra, ref’ten o interval ID’yi okuyarak :

Bir ref kullanarak şunları sağlarsınız:

  • Yeniden render işlemleri arasında bilgi saklayabilirsiniz (her render işleminde sıfırlanan değişkenlerin aksine).
  • Değiştirmek yeniden render işlemine neden olmaz (yeniden render işlemine neden olan state değişkenlerinin aksine).
  • Bilgi, bileşeninizin her kopyasına özgüdür (paylaşılan dış değişkenlerin aksine).

Bir ref’i değiştirmek yeniden render işlemine neden olmaz, bu nedenle ekranda görüntülemek istediğiniz bilgileri saklamak için ref’ler uygun değildir. Bunun yerine state kullanın. daha fazla bilgi edinin.

Bir ref ile DOM’u manipüle etmek

Bir ref’i üzerinde değişiklik yapmak için kullanmak oldukça yaygındır. React’ın bunun için yerleşik desteği vardır.

İlk olarak, null başlangıç değeri olan bir ref nesnesi tanımlayın:

Ref nesnenizi, manipüle etmek istediğiniz DOM elemanının JSX’ine ref özelliği olarak verin:

React, DOM elemanını oluşturduktan ve ekrana koyduktan sonra, ref nesnenizin current özelliğini o DOM elemanına tanımlar. Şimdi <input>’un DOM elamanına erişebilir ve gibi yöntemleri çağırabilirsiniz:

Eleman ekrandan kaldırıldığında, React current özelliğini null olarak geri tanımlar.

hakkında daha fazla bilgi edinin.

Ref içeriğini yeniden oluşturmayı önleme

React, başlangıçtaki ref değerini bir kez kaydeder ve sonraki render işlemlerinde bunu dikkate almaz.

new VideoPlayer() sonucu sadece başlangıç render işleminde kullanılmasına rağmen, bu işlemi her render işleminde çağırıyorsunuz. Bu, eğer pahalı nesneler oluşturuyorsa israf olabilir.

Bunu çözmek için ref’i şu şekilde başlatabilirsiniz:

Normalde, render sırasında ref.current yazmaya veya okumaya izin verilmez. Ancak bu senaryoda sorun yoktur çünkü sonuç her zaman aynıdır ve koşul sadece başlatma sırasında çalışır, bu nedenle tamamen öngörülebilirdir.

Derinlemesine İnceleme

useRef’i daha sonra başlatırken null kontrollerinden nasıl kaçınılır

Bir tip denetleyici kullanıyorsanız ve her zaman null kontrol etmek istemiyorsanız, bunun yerine şu şekilde bir model deneyebilirsiniz:

Burada playerRef kendisi boş olabilir. Ancak, getPlayer()’in null döndüren bir durum olmadığını tip denetleyicinize ikna etmelisiniz. Ardından, olay yöneticisinde getPlayer() kullanın.

Sorun Giderme

Özel bir bileşeni ref alamıyorum

Bileşeninize şu şekilde bir ref vermeyi denerseniz:

Konsolda bir hata alabilirsiniz:

Console
TypeError: Null’un özellikleri okunamıyor

Varsayılan olarak, kendi bileşenleriniz içlerindeki DOM elemanlarında ref’leri açığa çıkarmaz.

Bunu düzeltmek için, bir ref almak istediğiniz bileşeni bulun:

Ve ardından ref’i, bileşeninizin kabul ettiği props listesine ekleyin ve ref’i ilgili prop olarak iletin, şöyle:

Böylece ana bileşen ona bir ref alabilir.

hakkında daha fazla bilgi edinin.