UseEffect, useLayoutEffect ve useEffectEvent: React'taki Veri Alma Kancalarının Karşılaştırması

React kancaları, React bileşenlerindeki yan etkileri yönetmenin güçlü bir yoludur. Yan etkilerin üstesinden gelmeye yönelik en yaygın kancalardan üçü useEffect, useLayoutEffect ve useEffectEvent'tir. Her kancanın kendine özgü bir kullanım durumu vardır, bu nedenle iş için doğru olanı seçmek çok önemlidir.

UseEffect Kancası

kullanımEtkisi kanca bir React'ta temel kanca DOM manipülasyonu, eşzamansız işlemler gibi yan etkileri gerçekleştirmenize olanak tanır ve fonksiyonel bileşenlerde veri getirilmesi. Bu kanca iki argüman alan bir fonksiyondur: efekt fonksiyonu ve bağımlılık dizisi.

Efekt işlevi, yan etkiyi gerçekleştiren kodu içerir ve bağımlılık dizisi, etki işlevinin ne zaman çalışacağını belirler. Bağımlılık dizisi boşsa efekt işlevi, bileşenin ilk oluşturulmasında yalnızca bir kez çalışır. Aksi takdirde, bağımlılık dizisindeki değerlerden herhangi biri değiştiğinde efekt işlevi çalışır.

Verileri almak için useEffect kancasının nasıl kullanılacağına dair bir örnek:

import React from"react";
functionApp() {
const [data, setData] = React.useState([]);
 React.useEffect(() => {
 fetch("")
 .then((response) => response.json())
 .then((data) => setData(data));
 }, []);
return (

"app">
 {data.map((item) => (
{item.title}</div>
 ))}
 </div>
 );
}
exportdefault App;

Bu kod bir gösterir Uygulama useEffect kancasını kullanarak harici bir API'den veri getiren bileşen. useEffect'in efekt işlevi, JSONPlaceholder API'sinden örnek verileri getirir. Daha sonra JSON yanıtını ayrıştırır ve alınan verileri veri durum.

Veri durumuyla, Uygulama bileşeni şunu oluşturur: başlık eyaletteki her öğenin mülkiyeti.

Kullanım özellikleriEffect Hook

• Asenkron dostu: Asenkron işlemleri yerel olarak destekleyerek veri alımını kolaylaştırır.
• Oluşturulduktan sonra çalıştırılır: UseEffect kancası, uygulama bileşeni oluşturduktan sonra efektlerini yürütür ve kancanın kullanıcı arayüzünü engellememesini sağlar.
• Temizlemek: Bir işlevi döndürerek temizleme gerçekleştirmenin entegre bir yolunu sağlar. Bu özellikle dinleyiciler veya aboneliklerle çalışırken yararlı olabilir.

useLayoutEffect Kancası

KullanımLayoutEffect kanca buna benzer kullanımEtkisi hook ancak tüm DOM mutasyonlarından sonra eşzamanlı olarak çalışır. Bu, tarayıcının ekranı boyamasından önce çalıştığı anlamına gelir; bu da onu hassaslık gerektiren görevlere uygun hale getirir. Bir öğenin boyutunu ölçmek, bir öğeyi yeniden boyutlandırmak veya ona animasyon uygulamak gibi DOM düzeni ve stilleri üzerinde kontrol konum.

Aşağıda, bir dosyanın genişliğini değiştirmek için useLayoutEffect kancasının nasıl kullanılacağına ilişkin bir örnek verilmiştir. düğme eleman:

import React from"react";
functionApp() {
const button = React.useRef();
 React.useLayoutEffect(() => {
const { width } = button.current.getBoundingClientRect();
 button.current.style.width = `${width + 12}px`;
 }, []);
return (

"app">
Click Me</button>
 </div>
 );
}
exportdefault App;

Yukarıdaki kod bloğu, useLayoutEffect kancasını kullanarak düğme öğesinin genişliğini 12 piksel artırır. Bu, düğme ekranınızda görünmeden önce düğme genişliğinin artmasını sağlar.

UseLayoutEffect Hook'un özellikleri

• Senkron: Eşzamanlı olarak yürütülür ve içindeki işlem yoğunsa potansiyel olarak kullanıcı arayüzünü engeller.
• DOM okuma/yazma: Özellikle tarayıcı yeniden boyamadan önce değişikliklere ihtiyacınız varsa, doğrudan DOM'a okumak ve yazmak için en uygunudur.

useEffectEvent Kancası

useEffectEvent hook, bağımlılık sorunlarını çözen bir React kancasıdır. kullanımEtkisi kanca. UseEffect'e aşina iseniz bağımlılık dizisinin yanıltıcı olabileceğini biliyorsunuzdur. Bazen bağımlılık dizisine kesinlikle gerekli olan daha fazla değer koymanız gerekir.

Örneğin:

import React from"react";
functionApp() {
const connect = (url) => {
// logic for connecting to the url
 };
const logConnection = (message, loginOptions) => {
// logic for logging the connection details
 };
const onConnected = (url, loginOptions) => {
 logConnection(`Connected to ${url}`, loginOptions);
 };
 React.useEffect(() => {
const device = connect(url);
 device.onConnected(() => {
 onConnected(url);
 });
return() => {
 device.disconnect();
 };
 }, [url, onConnected]);
return<div>div>;
}
exportdefault App;

Bu kod şunu gösterir: Uygulama Harici bir hizmete bağlantıyı yöneten bileşen. bağlamak işlev belirtilen bir URL'ye bağlanırken günlük Bağlantısı işlev bağlantı ayrıntılarını günlüğe kaydeder. Son olarak, onConnected fonksiyon şunu çağırır: günlük Bağlantısı Cihaz bağlandığında başarılı bir bağlantı mesajını günlüğe kaydetme işlevi.

UseEffect kancası connect işlevini çağırır, ardından onConnected geri çağırma işlevini çalıştırılacak şekilde ayarlar. cihaz onConnected olayını tetikler. Bu geri arama bir bağlantı mesajını günlüğe kaydeder. Bileşenin bağlantısı kesildiğinde etkinleşen bir temizleme işlevi döndürür. Bu temizleme işlevi cihazın bağlantısının kesilmesinden sorumludur.

Bağımlılık dizisi şunları içerir: URL değişken ve onConnected işlev. App bileşeni her oluşturmada onConnected işlevini oluşturacaktır. Bu, useEffect işlevinin bir döngüde çalışmasına neden olacak ve bu da Uygulama bileşenini yeniden oluşturmaya devam edecektir.

UseEffect döngü problemini çözmenin birden fazla yolu vardır. Yine de bağımlılık dizinize daha fazla gereksiz değer eklemeden bunu yapmanın en etkili yolu useEffectEvent kancasını kullanmaktır.

import React from"react";
functionApp() {
const connect = (url) => {
// logic for connecting to the URL
 };
const logConnection = (message, loginOptions) => {
// logic for logging the connection details
 };
const onConnected = React.useEffectEvent((url, loginOptions) => {
 logConnection(`Connected to ${url}`, loginOptions);
 });
 React.useEffect(() => {
const device = connect(url);
 device.onConnected(() => {
 onConnected(url);
 });
return() => {
 device.disconnect();
 };
 }, [url]);
return<div>div>;
}
exportdefault App;

onConnected işlevini useEffectEvent kancasıyla sararak, useEffectEvent kancası her zaman en son değerleri okuyabilir. İleti Ve girişSeçenekler useEffect kancasına geçirmeden önce parametreler. Bu, useEffect'in onConnected işlevine veya kendisine iletilen değerlere güvenmesine gerek olmadığı anlamına gelir.

useEffectEvent kancası, useEffect'inizin belirli bir değere bağlı olmasını istediğinizde kullanışlıdır. etkisi, bağımlılık olarak kullanmamayı tercih ettiğiniz diğer değerleri gerektiren bir olayı tetikler. Efekti kullanın.

Kullanım özellikleriEffectEvent Hook

• Olaya dayalı yan etkiler için en uygunudur.
• useEffectEvent hook, aşağıdaki gibi olay işleyicileriyle çalışmaz tıklamada, onChange, vesaire.

useEffectEvent kancası hala deneyseldir ve şu anda mevcut değildir. React sürüm 18 kancaları.

Hangi Kanca Ne Zaman Kullanılır?

Yukarıdaki veri toplama kancalarının her biri farklı durumlar için uygundur:

• Veri işleniyor: UseEffect mükemmel bir seçimdir.
• Doğrudan DOM manipülasyonları: Yeniden boyamadan önce DOM'da eşzamanlı değişiklikler yapmanız gerekiyorsa useLayoutEffect'i tercih edin.
• Hafif operasyonlar: Kullanıcı arayüzünü engelleme riski taşımayan işlemler için useEffect'i özgürce kullanabilirsiniz.
• Olaya dayalı yan etkiler: Olayları sarmak için useEffectEvent kancasını ve yan efektleri çalıştırmak için useEffect kancasını kullanın.

Yan Etkileri Verimli Bir Şekilde Ele Alın

React kancaları bir olasılıklar dünyasının kapılarını açıyor ve useEffect arasındaki farkı anlıyor, useLayoutEffect ve useEffectEvent kancaları, yan etkileri ve DOM'u ele alma şeklinizi önemli ölçüde etkileyebilir manipülasyon. Kullanıcı dostu uygulamalar yapmak için bu kancaların özel gereksinimlerini ve sonuçlarını dikkate almak önemlidir.