React Hook'lar, bir React sınıfı bileşeni oluşturmak zorunda kalmadan durum ve diğer React özelliklerini kullanmanıza izin verir. Kancaları kullanarak, tamamen işlevsel React uygulamalarını yalnızca Function Components ile oluşturabilirsiniz. Artık class Example extends React.component {}gerekli değil.

Temel Kancalar

Günlük kullanım durumları için günlük kancalar.

React Temel Kancalar
- useState
- useEffect => Bu Makale
- useContext => Çok Yakında

useEffect

useEffect için Resmi Belgeler

useEffect işlev bağımsız değişkenleri

1. Bileşen yaşam döngüsü sırasında yürütülecek işlev.
2. Değer dizisi useEffect tetiklemeyi tetikleyen değişiklikleri izler. Boş bir dizinin geçirilmesi, sınıf tabanlı bir React bileşenini componentDidMountve componentWillUnmountyöntemlerini taklit eder.

Tanım

useEffectbileşenin ekranda görüntülenmesinden sonra (fonksiyonun tetiklenmesini belirli koşullarla sınırlamak mümkündür) her defasında kod çalıştırmak için kullanılır. Bir bileşende birden çok örneğini kullanmak mümkündür useEffect, ancak bunların her zaman aynı sırada yürütüldüğünden emin olun. Eğer useStateve useEffectfonksiyonları aynı sırayla çalışmıyorsa, çok kötü bir zaman geçireceksiniz (aşağıda doğru sıralamayı gerçekleştirme hakkında daha fazla bilgi). useEffectişlevler ayrıca bir işlev döndürerek kendi arkalarını da temizleyebilir.

örnekler

Temel kullanımı anlama ve uygulamadan sonra temizleme.

Her renderdan sonra aşağıdaki kod çalıştırılacaktır.

import React, {useEffect} from 'react';

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
});

import React, {useEffect} from 'react';
useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
}, [props.source]);

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
}, []); // Pass an empty array as the second argument

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
}, []); // Pass an empty array as the second argument

Kişisel Web Sitesi
LinkedIn
Instagram