时间戳

首页 > 解决方案 > 为什么在渲染之间没有记住箭头函数？

javascript - 为什么在渲染之间没有记住箭头函数？

问题描述

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

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

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

标签： javascriptreactjsarrow-functions

解决方案

请记住，这Foo()也是一个 JavaScript 函数，在每次渲染时都会重新运行。

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

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

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

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

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

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

来自 React Hooks 常见问题解答

由于在渲染中创建函数，Hooks 会变慢吗？

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

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

使用回调（）

返回一个记忆化的回调。

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

推荐阅读