React 中的自訂鉤子（類似）巨集嗎？

Question

我最近才開始了解 Lisp 上下文中的巨集是什麼。我的理解是，基本上，程式碼分兩次執行。在第一遍中，解釋器識別對巨集的呼叫並用它們的返回值替換它們。第二個，它正常執行程式碼。

這看起來就像 React 中自訂鉤子所發生的情況。例如，如果您有 useOnlineStatus 掛鉤：

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;
}

這就像一個巨集。如果您像這樣使用 useOnlineStatus 掛鉤：

const isOnline = useOnlineStatus();

這就像對巨集的呼叫。所以如果你有：

function StatusBar() {
  const isOnline = useOnlineStatus();
  return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
}

第一次通過後，它被轉換成：

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>;
}

然後在第二遍時它會正常執行。這是自訂鉤子發生情況的準確模型嗎？

Answer 1

如果你瞇著眼睛看的話，情況有點像那樣，但有幾點：

1. 雖然瀏覽器確實會執行多次傳遞來解析然後執行 JavaScript，但呼叫掛鉤並不是這樣的範例。因此，運行該元件只需一次傳遞，逐行運行，並在遇到該指令時單步執行該函數。

2. 相同的思維模型可以應用在每個函數呼叫。當您致電時：

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

您可以將其視為解壓縮 Math.max 中的程式碼並將其放入您的主函數中。但實際上它並不是這樣做的。