Benutzerdefinierte Hook-Makros (wie) in React?
Ich habe erst vor kurzem begonnen zu verstehen, was Makros in einem Lisp-Kontext sind. Nach meinem Verständnis wird der Code grundsätzlich in zwei Durchgängen ausgeführt. Im ersten Durchgang identifiziert der Interpreter Aufrufe von Makros und ersetzt sie durch ihre Rückgabewerte. Zweitens führt es den Code normal aus.
Das sieht aus wie das, was mit benutzerdefinierten Hooks in React passiert. Wenn Sie beispielsweise den Haken useOnlineStatus haben:
function useOnlineStatus() {
const [isOnline, setIsOnline] = useState(true);
useEffect(() => {
function handleOnline() {
setIsOnline(true);
}
function handleOffline() {
setIsOnline(false);
}
window.addEventListener('online', handleOnline);
window.addEventListener('offline', handleOffline);
return () => {
window.removeEventListener('online', handleOnline);
window.removeEventListener('offline', handleOffline);
};
}, []);
return isOnline;
}
Das ist wie ein Makro. Wenn Sie den useOnlineStatus-Hook wie folgt verwenden:
const isOnline = useOnlineStatus();
Das ist wie ein Aufruf eines Makros. Wenn Sie also Folgendes haben:
function StatusBar() {
const isOnline = useOnlineStatus();
return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
}
Nach dem ersten Durchgang wird es umgewandelt in:
function StatusBar() {
const [isOnline, setIsOnline] = useState(true);
useEffect(() => {
function handleOnline() {
setIsOnline(true);
}
function handleOffline() {
setIsOnline(false);
}
window.addEventListener('online', handleOnline);
window.addEventListener('offline', handleOffline);
return () => {
window.removeEventListener('online', handleOnline);
window.removeEventListener('offline', handleOffline);
};
}, []);
return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
}
Dann wird es beim zweiten Durchgang normal ausgeführt. Ist dies ein genaues Modell dessen, was mit benutzerdefinierten Haken passiert?
