你如何正确使用来自 HOC 的带有事件处理程序道具的 React.memo？

Question

我在这里创建了一个非常简单的例子..

https://codesandbox.io/s/react-memo-with-function-props-09fgyo

如您所见， ComponentB的渲染次数与ComponentB一样多......即使它被包裹在memo中并且没有接收counter作为道具。

如果您在它自己的页面 ( https://09fgyo.csb.app/ ) 中打开该应用程序，然后使用 React DevTools 分析该页面，您会看到它报告它的渲染原因是因为onClick发生了变化 (见截图）

所以..我知道发生这种情况的原因是因为每当 HOC 的 state 发生变化时，它都会重新渲染自己，并在这样做时创建一个新的handleButtonClick因为它是一个箭头 function。所以 React 看着它说，“哎呀。 .这是一个新的 function，重新渲染ComponentB ！”

我的问题是.. 解决此类性能问题的最佳模式是什么？

我的意思是..我想我可以将setCounter传递给CompnentB ，但这看起来很恶心.. 将 HOC 和它的 state 紧密耦合到ComponentB 。 （更新：现在我考虑了一下，也不能那样做，因为我也必须向下传递counter才能计算增量，而且由于它正在改变，它也会导致重新渲染……呃。）

我真的很茫然..有人有什么想法吗？

Answer 1

您可以使用useCallback挂钩来包装您传递给孩子的 function。

如果useCallback数组依赖项没有变化，它将记忆 function 并使用缓存而不是重新创建 function。