Question

使用类组件时，始终建议不要使用内联匿名函数，因为这样做对性能不利，即

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

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

这使我了解了功能组件和useState等。

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


[title, setTitle] = useState()

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

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

我知道可以使用useCallback钩子来缓存该函数，但也建议不要过度使用它们，因为它的反应速度很快，在某些简单情况下使用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>
    </>
  );
}

反应功能组件-将内联函数用于处理程序会影响性能吗？

1 个答案: