javascript - 地图中的内联函数

问题描述

避免循环中的内联函数的最有效方法是什么：

const SomeComponent = () => {
  const handler = (idx) => console.log(idx);
  return (<>
    [...Array(100)].map((_, index) => (
      <div onClick=(() => handler(index))>Click me {index}</div>
    </>);
}

猜猜这有点过度设计

const OtherComp = ({ index, onClick, children }) => {
  const handle = () => { onClick(index); }
  return <div onClick={handle}>{children}<div/>
} 

const SomeComponent = () => {
  const handler = useCallback((idx) => console.log(idx), []);
  return (<>
    [...Array(100)].map((_, index) => (
      <OtherComp onClick=(handler)>Click me {index}</div>
    </>);
}

我正在考虑的“问题”是/是：

垃圾收集器（几乎不在乎）
在循环中创建“相同”函数
随着输入道具的变化，每次点击都会重新渲染所有子元素 - 假设点击正在改变选定的 div

标签： javascriptreactjs

我认为这完全没问题。根本不可能对性能产生任何影响。但是，如果这是您关心的问题，因为index是在回调范围内.map，我能想到的唯一其他选择是让处理程序检查其周围的 DOM 以获取索引：

<div onClick={handler}>Click me {index}</div>

const handler = (e) => {
  const div = e.currentTarget;
  const index = [...div.parentElement.children].indexOf(div);
  console.log(index);
};

但是 using{() => handler(index)}是一种更加 React-ish 的风格，并且更容易阅读和理解 - 我更喜欢在所有情况下尽可能使用它。

javascript - 地图中的内联函数

问题描述

解决方案

推荐阅读