React 功能组件 - 对处理程序使用内联函数会影响性能吗？

Question

在使用类组件时，总是建议不要使用内联匿名函数，因为它对性能不利，即

<input value{this.state.title} 
          onChange={(event) => this.setState({title: event.target.value})} />

您通常必须在渲染方法之外创建一个名为 handleChange 的函数。这意味着每个渲染都不会创建一个新的内联匿名函数。

这让我想到了功能组件和 useState 等。

功能组件是渲染，所以如果我这样做

[title, setTitle] = useState()

<input value{this.title} 
          onChange={(event) => this.setTitle({title: event.target.value})} />

这将与创建函数相同，因为无论如何都会在每次创建函数 - 在函数组件中

我知道可以使用 useCallback 钩子来缓存函数，但也建议不要过度使用它们，因为反应速度很快，并且使用 useCallback 实际上对于简单的情况可能很糟糕。

所以，这让我回到了我原来的问题。

在函数组件内部，我们应该使用内联匿名函数吗？考虑到在功能组件内创建一个函数无论如何都会被创建。

无论如何我认为两者都是垃圾收集

有人知道推荐的方法吗？

提前致谢

Answer 1

使用内联箭头函数是React Docs - Hooks API Reference中推荐的方式。（见下文）

我认为useCallback会比每次创建一个新函数对性能产生更大的影响。

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
    </>
  );
}