7

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

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

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

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

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

有人知道推荐的方法吗？

提前致谢

4

1 回答 1

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>
    </>
  );
}
于 2019-11-29T09:49:06.457 回答