英文:
Are custom hooks in React (like) macros?
问题
我明白了。这似乎是在讨论在 Lisp 上下文中宏的工作原理，以及如何类比到 React 中的自定义钩子。在第一遍执行中，解释器会识别宏的调用并将其替换为其返回值。在第二遍执行中，它会正常执行代码。这个模型似乎可以准确描述自定义钩子的工作方式。
英文:
I've just recently started to learn about what a macro is in the context of Lisp. My understanding is that, basically, the code is executed in two passes. On the first pass, the interpreter identifies calls to macros and replaces them with their return value. On the second, it executes the code normally.
This seems like what is happening with custom hooks in React. For example, if you have a useOnlineStatus hook:
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;
}
that's like a macro. And if you use that useOnlineStatus hook like so:
const isOnline = useOnlineStatus();
it's like a call to a macro. So if you have:
function StatusBar() {
const isOnline = useOnlineStatus();
return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
}
after the first pass it gets transformed into:
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>;
}
and then on the second pass it gets executed normally. Is that an accurate model of what's going on with custom hooks?
答案1
得分: 2
如果你眯起眼睛看，有点像那样，但有几点：
-
虽然浏览器确实会进行多次解析然后执行javascript，但调用一个hook并不是其中的一个例子。因此，运行组件只是一个单独的过程，逐行进行，并在遇到该指令时进入该函数。
-
同样的心理模型可以应用于每一个函数调用。当你调用：
const foo = Math.max(0, 5);
你可以将其看作是将在Math.max中的代码解开并放入你的主函数中。但它并不是字面上这样做的。
英文:
If you squint it's kind of like that, but a couple things:
-
While the browser does do multiple passes to parse and then execute javascript, calling a hook is not an example of that. So running the component is just a single pass, going line by line, and stepping into the function when it hits that instruction.
-
The same mental model could be applied to every function call. When you call:
const foo = Math.max(0, 5);
You could think of that as unpacking the code that's in Math.max and putting it into your main function. But it's not literally doing that.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论