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

Question

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

<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 实际上对简单的情况不利。

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

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

我想无论如何都被垃圾收集了

有人知道推荐的方法吗？

提前致谢

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

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

React functional component - using inline functions for handlers affects performance?

reactjs

react-hooks

react-functional-component