javascript - 为什么在渲染之间无法记住箭头功能？

您能解释一下为什么handleClick函数总是新的吗？

function Foo() {
  const handleClick = () => {
    console.log('Click happened');
  }

  return <Button onClick={handleClick}>Click Me</Button>;
}

最佳答案

请记住，Foo()也是一个JavaScript函数，已在每个渲染器上重新运行。
在该函数的内部有一个语句是:const handleClick = () => {...};含义:创建一个函数并将其分配给我最近创建的局部变量handleClick。因此，它将在每个渲染器上重新创建。
这对性能的影响通常接近于零。但是，如果需要，您可以对此进行优化。const handleClick = useCallback(()=>{...},[dependencyArray]);如果该函数取决于可能更改的变量，则可以将其添加到dependencyArray中，如果其中一个更改，React将重新创建该函数。否则，它将与上次创建时保持相同的功能。
From React Hooks FAQ

来自:https://reactjs.org/docs/hooks-reference.html#usecallback
useCallback()