Reactjs 使用循环中的参数进行回调

我试图了解hooks的功能，但是我似乎不太明白如何正确使用函数

useCallback

。根据我对钩子规则的理解，我应该称之为顶级钩子，而不是逻辑钩子（比如循环）。这让我非常困惑，我应该如何在从循环渲染的组件上实现

useCallback

请看下面的示例代码段，其中我使用

onClick

处理程序创建了5个按钮，该处理程序将按钮的编号打印到控制台

const示例=（道具）=>{
const onClick=（键）=>{
log（“您单击：”，键）；
};
返回(
{
_.次（5）（键）=>{
返回(
onClick（键）}>
{key}
);
})
}
);
};
log（“你好”）；
ReactDOM.render（，document.getElementById（'root'））

这里的简单答案是，您可能不应该在这里使用
useCallback
。
useCallback
的要点是将相同的函数实例传递给优化的组件（例如
PureComponent
或
React.memo
ized组件），以避免不必要的重新提交

在这种情况下（或者我怀疑在大多数情况下），您没有处理优化的组件，因此没有理由像
useCallback
那样记忆回调


不过，假设记忆很重要，最好的解决方案可能是使用单个功能，而不是五个：每个按钮通过闭合携带
键
，而不是唯一的功能，您可以将
键
附加到元素：

<button data-key={key}>{key}</button>

此答案的
数据-*
属性部分也在中提供，用于优化大量元素的回调事件