Makro cangkuk tersuai (seperti) dalam React?

Question

Saya baru sahaja mula memahami maksud makro dalam konteks Lisp. Pemahaman saya ialah pada asasnya, kod tersebut dilaksanakan dalam dua laluan. Dalam pas pertama, jurubahasa mengenal pasti panggilan kepada makro dan menggantikannya dengan nilai pulangannya. Kedua, ia melaksanakan kod seperti biasa.

Ini kelihatan seperti yang berlaku dengan cangkuk tersuai dalam React. Contohnya, jika anda mempunyai cangkuk 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;
}

Ini seperti makro. Jika anda menggunakan cangkuk useOnlineStatus seperti ini:

const isOnline = useOnlineStatus();

Ini seperti panggilan kepada makro. Jadi jika anda mempunyai:

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

Selepas pas pertama, ia ditukar kepada:

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

Kemudian pada pas kedua ia akan dilaksanakan seperti biasa. Adakah ini model yang tepat tentang apa yang berlaku dengan cangkuk tersuai?

Answer 1

Jika anda juling, ia kelihatan seperti itu, tetapi dengan beberapa perkara:

1. Walaupun penyemak imbas melakukan berbilang pas untuk menghuraikan dan kemudian melaksanakan JavaScript, memanggil cangkuk bukanlah contoh sedemikian. Oleh itu, menjalankan komponen hanya memerlukan satu laluan, berjalan baris demi baris, dan melangkah ke dalam fungsi apabila arahan ditemui.

2. Model mental yang sama boleh digunakan untuk setiap fungsi panggilan. Apabila anda menghubungi:

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

Anda boleh menganggapnya sebagai membongkar kod dalam Math.max dan memasukkannya ke dalam fungsi utama anda. Tetapi itu sebenarnya bukan cara ia berfungsi.