reactjs - 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 Hook 来缓存函数，但它也建议不要过度使用它们，因为 react 速度很快，并且使用 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>
    </>
  );
}