reactjs - 事件处理程序上的匿名函数与命名函数

Question

我找了很久，还是没找到。谁能告诉我在事件处理程序上使用匿名函数或命名函数是否有区别(如果有，有什么区别)？

示例1:

...
onClick={() => toggleStatus(!status)}

示例2:

function handleToggleStatus() {
  toggleStatus(!status);
}
...
onClick={handleToggleStatus}

Answer 1

简短的版本:不，没有(至少在 React 特定的方式中；命名函数的一个好处是它们有名称，这在调用堆栈中很方便/堆栈跟踪)。

长版本:您可能看到人们说不要执行 onClick={() =>toggleStatus(!status)} 的原因并不是因为它是一个匿名函数；而是因为它是一个匿名函数。它是一个在每次渲染时都会重新创建的函数。这意味着它所使用的组件在每次渲染时都会看到不同的功能。 如果该组件在其 props 上被内存，并且您的组件由于与该组件无关的原因而被重新渲染，那么这可能是不必要的工作。在这种情况下，您可能希望使用 useCallback 来为组件提供稳定的函数:

const handleToggleStatus = useCallback(
    () => toggleStatus((status) => !status), // Assuming it allows functional updates
    []
);

或者:

const handleToggleStatus = useCallback(
    () => toggleStatus(!status), // If it doesn't allow functional updates
    [status] // <== Note dependency
);

这些函数是匿名的，并且每次都会重新创建，但是如果依赖项没有更改(作为性能优化)，useCallback 将返回早期版本，从而允许内存组件避免重新渲染。

有关 useCallback (和 useMemo 等)和内存的更多信息，请参见我的回答 here .

---

1 “这些函数是匿名的，并且每次都会重新创建......”它们不必是匿名的，没有理由你不能使用命名的函数表达式:

const handleToggleStatus = useCallback(
    function handleToggleStatus() { toggleStatus((status) => !status); }, // Assuming it allows functional updates
    []
);

或者:

const handleToggleStatus = useCallback(
    function handleToggleStatus() { toggleStatus(!status); }, // If it doesn't allow functional updates
    [status] // <== Note dependency
);