用循环内的参数反应钩子useCallback

Question

我试图了解钩子的功能，但是我似乎不太明白应该如何正确地使用函数usecallback。根据我对钩子规则的理解，我应该称它们为顶级的，而不是逻辑内的（比如循环）。这让我很困惑，我应该如何在从循环呈现的组件上实现UseCallback。

请看下面的示例片段，其中我使用onclick处理程序创建了5个按钮，该处理程序将按钮的编号打印到控制台。

const Example = (props) => {
  const onClick = (key) => {
    console.log("You clicked: ", key);
  };
  
  return(
    <div>
      {
        _.times(5, (key) => {
          return (
            <button onClick={() => onClick(key)}>
              {key}
            </button>
          );
        })
      }
    </div>
  );
};
console.log("hello there");

ReactDOM.render(<Example/>, document.getElementById('root'));

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id='root'>
</div>

现在，由于我在onClick(key)}>中使用了箭头函数，每次呈现示例时都会创建一个新的函数实例，我这样做是因为我希望onClick函数知道是哪个按钮调用了它。我认为可以通过使用useCallback使用新的react hooks功能来防止这种情况，但是如果我将它应用于const onclick，那么它仍然会在每次呈现中创建一个新实例，因为需要内联箭头函数来给出key参数，而且据我所知，我不允许将它应用于循环中的呈现（尤其是在循环顺序可能改变的情况下，对吗？）。

那么，如何在此场景中实现usecallback，同时保持相同的功能呢？有可能吗？

Answer 1

这里的简单答案是，您可能不应该在这里使用usecallback。UseCallback的要点是将相同的函数实例传递给优化的组件（例如purecomponent或react.memoized组件），以避免不必要的重新发送器。

在这种情况下（或者我怀疑大多数情况下），您没有处理优化的组件，所以没有理由像使用usecallback那样记录回调。

但是，假设记忆很重要，这里最好的解决方案可能是使用一个函数而不是五个函数：不是每个按钮通过闭包携带键的唯一函数，而是将键附加到元素：

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

然后从单击处理程序中的event.target.dataset[“key”]中读取密钥：

const Example = (props) => {
  // Single callback, shared by all buttons
  const onClick = React.useCallback((e) => {
    // Check which button was clicked
    const key = e.target.dataset["key"]
    console.log("You clicked: ", key);
  }, [/* dependencies */]);
  
  return(
    <div>
      {
        _.times(5, (key) => {
          return (
            <button data-key={key} onClick={onClick}>
              {key}
            </button>
          );
        })
      }
    </div>
  );
};
console.log("hello there");

ReactDOM.render(<Example/>, document.getElementById('root'));

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

<div id='root'>
</div>