Javascript “渲染”与“属性”中的箭头函数可携带数据

在REACT中开发时，我多次面临将项传递到函数的需要，例如：

// Inside a Hook component
return (
  ...
  {nodes.map(n => <Node data={node} onClick={(e) => handleNodeClick(e, node)} />)}
);

因此，正如您所看到的，最终，在handleNodeClick2中，我得到了我需要的节点。但是，我想知道我所需要做的一切是否值得，或者我应该仅仅使用一个箭头函数

// Higher Order Function to enclose `node` in function scope to be used later
// Function takes a node parameter and returns an event handler function
const handleNodeClick = node => e => {
  // node in function scope
  // do what you need
  ...
}

return (
  ...
  {nodes.map((node, i) => (
    <Node
      data={node}
      data-is-node={""}
      data-node-index={i}
      onClick={handleNodeClick2(node)}
    />
  ))}
);

---

希望我对这个问题解释得足够好。特别是，我甚至不确定render方法中的“无箭头函数”这一短语是否也适用于钩子组件。

如果您想要箭头函数的简单性而不需要您尝试过的复杂性，可以创建一个更高阶的函数，该函数将要传递给回调的节点接收并返回回调函数

// Higher Order Function to enclose `node` in function scope to be used later
// Function takes a node parameter and returns an event handler function
const handleNodeClick = node => e => {
  // node in function scope
  // do what you need
  ...
}

return (
  ...
  {nodes.map((node, i) => (
    <Node
      data={node}
      data-is-node={""}
      data-node-index={i}
      onClick={handleNodeClick2(node)}
    />
  ))}
);

匿名内部箭头函数通常可以在渲染函数中使用。有时不鼓励这种方法的原因是，您实际上是将相同的回调实现传递给一组被映射的元素，每个被映射的元素都会得到函数的完整副本。创建和实例化所有这些回调函数可能并不昂贵，但也有相关的成本。在这种情况下，模式只是定义一次命名的arrow函数回调，并将引用传递给它

items.map(item => <button onClick={e => { /* expensive callback code */}}>{item}</button>)

对

const expensiveCallback = e => { /* expensive callback code */};

...

items.map(item => <button onClick={expensiveCallback}>{item}</button>)

如果你担心的话，你可以更进一步，并考虑地图的回调

const expensiveCallback = e => { /* expensive callback code */};
const renderItemButton = item => <button onClick={expensiveCallback}>{item}</button>;

...

items.map(renderItemButton)

---

只需使用箭头函数。这种东西在技术上性能较差，但你几乎不会注意到。最好选择可读性更强的选项。好的，谢谢。只是一个确定我理解的问题。您说过，有时不建议使用它的原因是，您实际上传递的是相同的回调实现：在我的例子中，arrow函数是onClick={e=>handleNodeClicke，node}，每个项只获得这个小函数的一个副本，或者甚至获得handleNodeClick的一个副本？因为，在第一种情况下，我可以肯定地说，成本不会带来麻烦，但在第二种情况下。。它可能取决于handleNodeClick实现，每个实现都会获得定义的内联函数e=>handleNodeClicke，节点的实例。这里handleNodeClick是在这个函数的外部定义的，所以它只是在执行时调用它。劝阻是当一些人在这个匿名函数中加入更多的逻辑时。