jsx中的箭头功能

Question

const MyComp = () => <button onClick={() => nagivate('/')}>home</button>

我有上面的代码，我把箭头函数在我的onClick处理程序。我的同事让我这样做:

const MyComp = () => {
const handleClick = () => nagivate('/')
return <button onClick={handleClick}>home</button>
}

它的意义是什么?他认为我们可能存在性能问题。我困惑。

Answer 1

两个版本是等价的。handleClick函数将在每次渲染时重新定义。为了提高性能，可以使用useCallback(() => nagivate('/'), [nagivate])。那么只有navigate函数发生变化，函数才会发生变化。

Answer 2

如果您传递匿名函数作为事件处理程序，它将在每次呈现时导致函数重新计算(重建)，从而迫使暴露您事件的元素也呈现，因为它"认为";传递该新处理程序是因为匿名事件处理程序的新函数引用。如果函数重新计算影响你的UI性能，我建议你在useCallback中包装处理程序，这样你就会有稳定的处理程序引用。最后，我不同意你的同事所说的这个(一个简单的按钮)会对你的性能产生影响，如果确实如此，那就意味着你的上层是需要优化的。它更干净，但就性能而言，在这个特定的情况下，几乎没有区别。