Merhaba arkadaşlar, bu örnekte size React'in useEffect işlevini bir profesyonel gibi kullanmak için bilmeniz gereken her şeyi göstereceğim .
Kısa bir tarihçe
useEffect olmadan önce yaşam döngüsü yöntemleri vardı, yani:
- bileşenDidMount
- bileşenDidUpdate
- bileşenWillUnmount
componentDidUpdate(prevProps, prevState) {
if (prevProps.foo !== this.props.foo) {/* do something */}
if (prevState.bar !== this.state.bar) {/* do something else */}
}
Bu yaşam döngüsü yöntemleriyle, bileşenin durumundaki herhangi bir değişikliği güvenilir bir şekilde halledebiliriz, o halde useEffect değişikliği neden ?
React Stateless Components Girin
Bir noktada (sanırım 2016 gibi erken bir tarihte), React ekibi yalnızca normal, eski bir Javascript işleviyle somutlaştırılabilen React bileşenleri oluşturmaya karar verdi. Yani:
import React from "react";
function MyFunc() {
return <div>Hey!</div>
}
React.useEffect'i girin
Durum değişikliklerini yönetmeye yönelik yeni yaklaşım , React kitaplığı tarafından sunulan bir useEffect işlevi biçiminde geldi . Peki çok sevdiğimiz componentDidMount , componentDidUpdate ve componentWillUnmount yöntemlerimizi nasıl yeniden oluşturabiliriz ? Daha önceki durumsuz işlevimizi genişletelim:
import React from "react";
function MyFunc(props) {
const [bar setBar] = React.useState(null);
React.useEffect(() => {
console.log("componentDidMount");
return () => {
console.log("componentDidUnmount")
}
}, []);
React.useEffect(() => {
console.log("componentDidUpdate when 'bar' changes");
}, [bar]);
React.useEffect(() => {
console.log("componentDidUpdate when 'props.foo' changes");
}, [props.foo]);
return <div>Hey!</div>
}
Bu örneğe eklediğimiz bir diğer şey, bir durum kancası olan React.useState, bu öğreticinin kapsamı dışındadır, ancak bununla ilgili daha fazla bilgiyi buradan öğrenin !
Yaşam döngüsü yönetiminin ötesine geçmek
Önceki yaşam döngüsü yöntemlerinin yanı sıra bir bileşenin durumunu da yönetebilmemiz harika. Durum bilgisi olmayan işlevlerin basitliği ve yeniden kullanılabilirliği ile React.useEffect işlevi arasında, bizim için yeni bir paradigma kullanılabilir hale geldi: yeniden kullanılabilir durumlu işlevler veya daha yaygın olarak adlandırılan: özel kancalar .
Sizin gibi bilgili bir okuyucu, useEffect ile daha önce olduğu gibi prevProps veya prevState özelliğine erişemeyeceğimizi fark etmiş olabilir. Korkma! Bunun için çözümü buradan okuyun . Bu çözümün işe yaramasının nedeni, React.useRef'in bileşenin yeniden oluşturulmasını tetiklememesidir. Ek olarak, bağımlılıklar olmadan useEffect, hangi durum değişikliğinin tetiklediğine bakılmaksızın bileşenin her yeniden oluşturulmasında tetiklenir.
Merhaba Özel Kancalar
Özel bir kanca için, React'in buradaki resmi belgelerinde paylaştığından daha iyi bir temel örnek yoktur . Örneğin en altından başlayalım ve yolumuza devam edelim:
function FriendListItem(props) {
const isOnline = useFriendStatus(props.friend.id);
return (
<li style={{ color: isOnline ? 'green' : 'black' }}>
{props.friend.name}
</li>
);
}
import React, { useState, useEffect } from 'react';
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
useEffect(() => {
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});
return isOnline;
}
Sonuç
Bu eğitimde şunları inceledik:
- useEffect'ten önce bir bileşenin yaşam döngüsünü nasıl yönettiğimiz ve bu yaklaşımın neden kullanımdan kaldırıldığı
- Bir bileşenin yaşam döngüsünü etkin bir şekilde yönetmek için useEffect'i nasıl kullanabiliriz?
- Yeniden kullanılabilir durumlu işlevler oluşturmak için React'in durumsuz işlevlerinin ve useEffect'in yeniden kullanılabilirliğinden nasıl yararlanabiliriz.
