您如何正确使用 React.memo w/ HOC 的事件处理程序道具？
How do you properly use React.memo w/ event handler props from HOC?
我在这里创建了一个非常简单的例子..
https://codesandbox.io/s/react-memo-with-function-props-09fgyo
如您所见，ComponentB 的渲染次数与 ComponentB 一样多。道具
如果您在应用程序自己的页面 (https://09fgyo.csb.app/) 中打开该应用程序，然后使用 React DevTools 分析该页面，您会看到它报告它呈现的原因是因为 onClick 道具变化（见截图）
所以..我知道发生这种情况的原因是因为每当 HOC 的状态发生变化时，它都会重新呈现自己，并在这样做时创建一个新的 handleButtonClick 因为它是一个箭头函数。所以 React 看着它说，“哎呀..这是一个新功能，重新渲染 ComponentB！”
我的问题是..解决此类性能问题的最佳模式是什么？
我的意思是..我想我可以将 setCounter 传递给 CompnentB，但这看起来很恶心.. 将 HOC 和它的状态紧密耦合到 ComponentB。 （更新：现在我考虑了一下，也不能那样做，因为我还必须传递 counter 才能计算增量，而且由于这种情况正在发生变化，它会 也导致重新渲染..呃。）
我真的很茫然..有人有什么想法吗？
您可以使用 useCallback 钩子来包装您传递给 child 的函数。
如果 useCallback 数组依赖项的 none 更改，它将记忆函数并使用缓存而不是重新创建函数。
我在这里创建了一个非常简单的例子..
https://codesandbox.io/s/react-memo-with-function-props-09fgyo
如您所见，ComponentB 的渲染次数与 ComponentB 一样多。道具
如果您在应用程序自己的页面 (https://09fgyo.csb.app/) 中打开该应用程序，然后使用 React DevTools 分析该页面，您会看到它报告它呈现的原因是因为 onClick 道具变化（见截图）
所以..我知道发生这种情况的原因是因为每当 HOC 的状态发生变化时，它都会重新呈现自己，并在这样做时创建一个新的 handleButtonClick 因为它是一个箭头函数。所以 React 看着它说，“哎呀..这是一个新功能，重新渲染 ComponentB！”
我的问题是..解决此类性能问题的最佳模式是什么？
我的意思是..我想我可以将 setCounter 传递给 CompnentB，但这看起来很恶心.. 将 HOC 和它的状态紧密耦合到 ComponentB。 （更新：现在我考虑了一下，也不能那样做，因为我还必须传递 counter 才能计算增量，而且由于这种情况正在发生变化，它会 也导致重新渲染..呃。）
我真的很茫然..有人有什么想法吗？
您可以使用 useCallback 钩子来包装您传递给 child 的函数。
如果 useCallback 数组依赖项的 none 更改，它将记忆函数并使用缓存而不是重新创建函数。