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

Question

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

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

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

Answer 1

请记住，这Foo()也是一个JavaScript函数，已在每个渲染器上重新运行。

在该函数的内部有一个语句是：

const handleClick = () => {...};

含义：创建一个函数并将其分配给我最近创建的局部变量handleClick。因此，它将在每个渲染器上重新创建。

这对性能的影响通常接近于零。但是，如果需要，您可以对此进行优化。

const handleClick = useCallback(()=>{...},[dependencyArray]);

如果该函数取决于可能更改的变量，则可以将其添加到中dependencyArray，如果其中一个更改，React将重新创建该函数。否则，它将与上次创建时保持相同的功能。

来自React Hooks常见问题解答

挂钩是否由于在render中创建函数而变慢？

不。在现代浏览器中，闭包的原始性能与类相比，除极端情况外没有显着差异。

来自：https : //reactjs.org/docs/hooks-reference.html#usecallback

useCallback（）

返回一个已记忆的回调。

传递内联回调和依赖项数组。useCallback将返回回调的记忆版本，仅在其中一个依赖项已更改时才更改。当将回调传递给依赖于引用相等性的优化子组件以防止不必要的渲染（例如，shouldComponentUpdate）时，此方法很有用。