React'in useEffect Hook'unu kullanma

Kullanmak useEffectmuhtemelen React Hooks'un en iyi kısmıdır. Bileşen yaşam döngüsü yöntemlerinin karmaşasını azaltmaya yardımcı olur ve en önemlisi yaşam döngüsü yöntemlerinde ortaya çıkabilecek farklı mantığı ayırmaya yardımcı olur. useEffectBugün, React web sitesindeki örneklerle temel faydalarının her biri için bir örnek üzerinden gideceğiz .

İlk olarak, kancanın genel dağınıklığı azaltmada nasıl yardımcı olabileceğini gözden geçirelim. Bu ilk durum, tipik sınıf tabanlı yaşam döngüsü yönteminizin, temel bir durumda, bağlantıyı kesmeden nasıl içereceği olacaktır.

componentDidMount() { 
    document.title = `You clicked ${this.state.count} times`;  
}
componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;  
}

useEffect(() => {
    document.title = `You clicked ${count} times`;  
});

Yukarıdaki örnekten de anlayabileceğiniz gibi, bu daha sonra useEffectAPI çağrılarının kullanılması ve bağlantının kaldırılması durumunda ne kadar iyi olduğunu gösterecektir. Aşağıda, bir arkadaşınızın çevrimiçi durumuna abone olmak için ChatAPI kullanıyorsanız yaşam döngüsü yöntemlerinizin nasıl görünebileceğine dair basit bir örnek verilmiştir.

componentDidMount() {
    ChatAPI.subscribeToFriendStatus(      
        this.props.friend.id,      
        this.handleStatusChange    
    );  
}
componentWillUnmount() {    
    ChatAPI.unsubscribeFromFriendStatus(      
        this.props.friend.id,      
        this.handleStatusChange    
    );  
}
handleStatusChange(status) {    this.setState({      isOnline: status.isOnline    });  }

useEffect(() => {    
    function handleStatusChange(status) {
        setIsOnline(status.isOnline);    
    }
ChatAPI.subscribeToFriendStatus(
        props.friend.id, 
        handleStatusChange
    );
return function cleanup() {
        ChatAPI.unsubscribeFromFriendStatus(
            props.friend.id, 
            handleStatusChange );    
    };  
});

useEffectBunun her yeniden oluşturmada çalıştırıldığını unutmayın ! Güncellemeniz grafiksel olarak pahalıysa veya sürekli olarak ihtiyaç duyulmayan bir API çağrısıysa, bu aşırı olabilir. En iyi kısımlardan biri, useEffectbir şeyi optimize etmenin ne kadar kolay olduğudur.

useEffect(() => {
    const subscription = props.source.subscribe();
return () => {
      subscription.unsubscribe();
    };
},
  [props.source],
);

useEffect(() => {}, []);

useEffectAyrıca, ikinci bağımsız değişken olarak boş bir dizi eklerseniz , yalnızca bir kez çalışır ve gerekirse bağlantısını keser. Bu, yalnızca kullanıp kullanmamanıza benzer. Bu, componentDidMountbaşlangıçta componentWillUnmountyalnızca componentDidUpdatebir kez çalıştırmak isteyip istemediğinizi bilmek için çok önemli bir numaradır.

Şimdi, bu örnekler oldukça basitti ve umarım Classes kullanımından Hooks'a geçişinizde size daha kolay rehberlik edebilmişimdir. useEffectHook'ları kullanmak için harika bir araçtır ve kod tabanınızda birikebilecek hantal dev yaşam döngüsü işlevlerini yönetme yükünün azaltılmasına yardımcı olur.

Her useEffectbiri, kendi bağlamasını, güncellemelerini ve sökme işlemlerini gerçekleştirebilen kendi işlevidir. Bunun, "dışarıdan" geliştiricilerin daha kolay bakım yapmasına ve gerekirse, kodun diğer bölümlerini yanlışlıkla karıştırmadan kod tabanının bu bölümünde değişiklik yapmasına yardımcı olduğunu düşünüyorum. Ayrıca bunun için optimizasyonda kolayca değişiklik veya eklemeler yapabilirler.

useEffectDeğiştirdikleri işlevin yalnızca o belirli abonelik veya güncelleme için gerekli olanı ele aldığını güvenle bilebilirler . Tabii ki, orijinal geliştiricinin bu işleve alakasız bir mantık eklemediğini varsayarsak! Asla böyle bir şey yapmayacağını biliyorum, değil mi?

Kancayı React'te kullanma hakkındaki küçük kitabımı okuduğunuz için teşekkürler useEffect. Hoşunuza gittiyse (ve bir şeyler öğrendiyseniz), React'te de optimizasyon konusuna yakın gelecekte de değinmeyi düşünüyordum, özellikle useStatede henüz bundan bahsetmediğim için. Ne olursa olsun, zaman ayırdığınız için teşekkürler ve güvende kalın!