React bileşenlerini sınıflarla oluştururken, bileşen componentDidMountkancaya takıldığında yüklenen kodumuzu çalıştırırız .

Ancak, React bileşenleriyle bu mevcut değildir.

Bu yazıda, componentDidMountReact fonksiyon bileşenleri içindeki kanca ile aynı sonucun nasıl üretileceğine bakacağız .

Kullanım Etkisi Kancası

Kodu yalnızca bileşen monte edildiğinde çalıştırmak için useEffectkancayı kullanabiliriz .

2. bağımsız değişken olarak boş bir diziye useEffectgeçersek, 1. bağımsız değişkendeki geri arama yalnızca bileşen bağlandığında çalışır.

Örneğin şunu yazabiliriz:

import React, { useEffect } from "react";
export default function App() {
  useEffect(() => {
    console.log("mounted");
  }, []);
return <div className="App"></div>;
}

React Hook'ları componentDidUpdate eşdeğeri

Yaşam componentDidUpdatedöngüsü yönteminin eşdeğeri de useEffectkancadır.

componentDidUpdate bir durum veya prop değerleri değiştirdiğinde çalışır.

useEffect2. argümanına ilettiğimiz diziye izlemek istediğimiz durum veya prop değerlerini ileterek de aynı şeyi yapabiliriz useEffect.

Örneğin şunu yazabiliriz:

import React, { useEffect, useState } from "react";
const Count = ({ count }) => {
  useEffect(() => {
    console.log(count);
  }, [count]);
return <p>{count}</p>;
};
export default function App() {
  const [count, setCount] = useState(0);
return (
    <div className="App">
      <button onClick={() => setCount((c) => c + 1)}>increment</button>
      <Count count={count} />
    </div>
  );
}

Bir durumu izlemek için şunu yazabiliriz:

import React, { useEffect, useState } from "react";
export default function App() {
  const [count, setCount] = useState(0);
useEffect(() => {
    console.log(count);
  }, [count]);
return (
    <div className="App">
      <button onClick={() => setCount((c) => c + 1)}>increment</button>
      <p>{count}</p>
    </div>
  );
}

React Hook'ları componentWillUnmount'a eşdeğer

componentWillUnmountBir Tepki sınıf bileşeninde yaşam döngüsü yöntemi bir bileşeni kaldırmak zaman bize kod çalıştırmasına olanak tanır.

Aynı şeyi useEffectkanca ile tekrar yapabiliriz.

Bunu useEffectyapmak için geri aramada bir işlev döndürmemiz gerekiyor.

Geri döndürdüğümüz işlev, bileşen ayrıldığında çalışacaktır.

Örneğin şunu yazabiliriz:

import React, { useEffect } from "react";
export default function App() {
  useEffect(() => {
    console.log("mounted");
    return () => {
      console.log("unmounted");
    };
  }, []);
return <div className="App"></div>;
}

O 'unmounted'zaman Appbileşeni ne zaman çıkardığımızı görmeliyiz .

Çözüm

Biz kullanabilirsiniz useEffectyaşam döngüsü yöntemleri sınıf bileşenler yapabileceği şeyleri yapmaya Tepki fonksiyonu bileşenlerindeki kanca.