tepki kancaları useEffect () temizleme yalnızca componentWillUnmount?

Sorunumu kolayca sormak için bu kodun sonucunu açıklayayım.

const ForExample = () => {
    const [name, setName] = useState('');
    const [username, setUsername] = useState('');

    useEffect(() => {
        console.log('effect');
        console.log({
            name,
            username
        });

        return () => {
            console.log('cleaned up');
            console.log({
                name,
                username
            });
        };
    }, [username]);

    const handleName = e => {
        const { value } = e.target;

        setName(value);
    };

    const handleUsername = e => {
        const { value } = e.target;

        setUsername(value);
    };

    return (
        <div>
            <div>
                <input value={name} onChange={handleName} />
                <input value={username} onChange={handleUsername} />
            </div>
            <div>
                <div>
                    <span>{name}</span>
                </div>
                <div>
                    <span>{username}</span>
                </div>
            </div>
        </div>
    );
};

Bağlandığında ForExample component, 'etki' günlüğe kaydedilecektir. Bu componentDidMount().

Ve ad girişini her değiştirdiğimde, hem 'efekt' hem de 'temizlenmiş' günlüğe kaydedilecek. Bunun tersi, [username]ikinci parametresine eklediğimden beri kullanıcı adı girişini değiştirdiğimde hiçbir mesaj günlüğe kaydedilmeyecek useEffect(). Bu,componentDidUpdate()

Son olarak, kaldırıldığında ForExample component, 'temizlendi' günlüğe kaydedilir. Bu componentWillUnmount().

Hepimiz bunu biliyoruz.

Özetlemek gerekirse, bileşen her yeniden oluşturulduğunda 'temizlendi' çağrılır (ayırma dahil)

Bu bileşenin yalnızca bağlantısı kesildiği an için 'temizlenmiş' olarak günlüğe kaydedilmesini istersem, ikinci parametresini olarak değiştirmem useEffect()gerekir [].

Ama ben değişim [username]için [], ForExample componentartık aletlerin componentDidUpdate()isim girişi için.

Yapmak istediğim şey, bileşenin hem componentDidUpdate()isim girişi hem de componentWillUnmount(). (yalnızca bileşenin kaldırıldığı an için günlük 'temizlendi')

Temizleme işlemine bağlı olmadığından username, temizlemeyi useEffectikinci argüman olarak boş bir dizi verilen ayrı bir diziye koyabilirsiniz .

Misal

const { useState, useEffect } = React;

const ForExample = () => {
  const [name, setName] = useState("");
  const [username, setUsername] = useState("");

  useEffect(
    () => {
      console.log("effect");
    },
    [username]
  );

  useEffect(() => {
    return () => {
      console.log("cleaned up");
    };
  }, []);

  const handleName = e => {
    const { value } = e.target;

    setName(value);
  };

  const handleUsername = e => {
    const { value } = e.target;

    setUsername(value);
  };

  return (
    <div>
      <div>
        <input value={name} onChange={handleName} />
        <input value={username} onChange={handleUsername} />
      </div>
      <div>
        <div>
          <span>{name}</span>
        </div>
        <div>
          <span>{username}</span>
        </div>
      </div>
    </div>
  );
};

function App() {
  const [shouldRender, setShouldRender] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setShouldRender(false);
    }, 5000);
  }, []);

  return shouldRender ? <ForExample /> : null;
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

birden fazla kullanım kullanabilirsiniz

örneğin değişkenim data1 ise bunların hepsini bileşenimde kullanabilirim

useEffect( () => console.log("mount"), [] );
useEffect( () => console.log("will update data1"), [ data1 ] );
useEffect( () => console.log("will update any") );
useEffect( () => () => console.log("will update data1 or unmount"), [ data1 ] );
useEffect( () => () => console.log("unmount"), [] );

function LegoComponent() {

  const [lego, setLegos] = React.useState([])

  React.useEffect(() => {
    let isSubscribed = true
    fetchLegos().then( legos=> {
      if (isSubscribed) {
        setLegos(legos)
      }
    })
    return () => isSubscribed = false
  }, []);

  return (
    <ul>
    {legos.map(lego=> <li>{lego}</li>)}
    </ul>
  )
}

Yukarıdaki kodda, fetchLegos işlevi bir söz verir. UseEffect kapsamında bir koşul uygulayarak, bileşenin bağlantısı kesildikten sonra uygulamanın durumunu ayarlamasını önleyerek sözü "iptal edebiliriz".

Uyarı: Bağlanmayan bir bileşende React durum güncellemesi gerçekleştirilemez. Bu işlem yok, ancak uygulamanızda bir bellek sızıntısı olduğunu gösteriyor. Düzeltmek için, bir useEffect temizleme işlevindeki tüm abonelikleri ve zaman uyumsuz görevleri iptal edin.

çok fazla karmaşık işlev ve yöntem oluşturmak yerine yaptığım şey bir olay dinleyicisi oluşturmak ve bunu manuel olarak yapma konusunda endişelenmeden benim için otomatik olarak bağlama ve ayırma işlemlerini yapmaktır. İşte bir örnek.

//componentDidMount
useEffect( () => {

    window.addEventListener("load",  pageLoad);

    //component will unmount
    return () => {
       
        window.removeEventListener("load", pageLoad);
    }

 });

şimdi bu kısım bittiğine göre pageLoad fonksiyonundan istediğim her şeyi böyle çalıştırıyorum.

const pageLoad = () =>{
console.log(I was mounted and unmounted automatically :D)}

useEffect kendi kapsamı içinde izole edilir ve buna göre oluşturulur. Https://reactjs.org/docs/hooks-custom.html adresinden görüntü