Benutzerdefinierte Hook-Makros (wie) in React?

Question

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?

Answer 1

如果你眯着眼睛看的话，情况有点像那样，但有几点：

1. 虽然浏览器确实会执行多次传递来解析然后执行 JavaScript，但调用挂钩并不是这样的示例。因此，运行该组件只需一次传递，逐行运行，并在遇到该指令时单步执行该函数。

2. 相同的思维模型可以应用于每个函数调用。当您致电时：

const foo = Math.max(0, 5);

您可以将其视为解压 Math.max 中的代码并将其放入您的主函数中。但实际上它并不是这样做的。