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

Question

使用类组件时，始终建议永远不要执行内联匿名函数，因为它对性能不利，即

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

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

这让我想到了功能组件和使用状态等。

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

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

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

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

所以，这让我回到了我最初的问题。

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

我想反正两者都是垃圾收集

的有人知道推荐的方法吗？

提前致谢

Answer 1

使用 React Docs - Hooks API 参考中的推荐方法。(见下文(

我认为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>
</>
);
}