javascript - 渲染中的箭头函数与。携带数据的属性

Question

在 REACT 中进行开发时，我多次面临将项目传递到函数中的需要，例如这样做:

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

基本上，我有一个变量 nodes ，可能来自 props , useMemo ， ... 任何事物。然后，我创建一个 <Node>每个节点的组件。
最后，如您所见，<Node>组件有一个onClick props，触发一个函数。在该函数中，我需要节点及其所有数据(想象一棵树的节点，具有唯一ID、图标...)。

所以，按照示例中的方式编写，我实现了我所需要的，但是!我在 return 语句中有一个箭头函数，并且我还读到在 render() 中有一个箭头函数不好。方法..我想 return 也是如此Hook 组件内的语句。

因此，为了克服箭头函数的使用，我多次使用属性来避免这种情况。基本上是这样的:

// Inside a Hook component
const handleNodeClick = (e) => {
  if (e.target instanceof HTMLElement) {
    const nodeDOM = e.target.closest('[data-is-node]');

    if (nodeDOM) {
      const nodeIndex = e.target.getAttribute("data-node-index");
      const node = nodes[nodeIndex];

      ...
    }
  }
}

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

所以，正如你所看到的，最终，在 handleNodeClick2 中我确实有node我需要。但是，我想知道我需要做的一切是否值得，或者我应该只使用箭头函数。

希望我已经足够好地解释了这个问题。特别是，我什至不确定短语“render() 方法内没有箭头函数”是否也适用于 Hook 组件。

Answer 1

如果您想要箭头函数的简单性而不需要您尝试过的复杂性，您可以创建一个高阶函数来获取您想要传递到的节点回调并返回回调函数。

// 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)}
    />
  ))}
);

匿名内部箭头函数通常非常适合在渲染函数中使用。有时不鼓励这样做的原因是，您实际上将相同回调实现传递给一堆正在映射的元素，每个映射元素都是该函数的完整副本。创建和实例化所有这些回调函数可能并不昂贵，但会产生相关成本。在这种情况下，模式是简单地定义一个命名箭头函数回调(一次)并将引用传递给它。

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>)

如果您担心的话，您可以更进一步，也可以考虑 map 的回调

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

...

items.map(renderItemButton)