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

Posted 2023-02-22

【中文标题】React 功能组件 - 对处理程序使用内联函数会影响性能？

【英文标题】：React functional component - using inline functions for handlers affects performance?

【发布时间】：2020-03-24 21:10:51

【问题描述】：

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

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

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

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

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

[title, setTitle] = useState()

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

这和创建一个函数是一样的，因为函数每次都会被创建——在一个函数组件中

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

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

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

我想这两个都是垃圾收集的

有人知道推荐的方法吗？

提前致谢

【参考方案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>
    </>
  );