map中的内联函数

Question

避免在循环中使用内联函数的最有效方法是什么:

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

"issues"我在想were/are:

• 垃圾收集器(几乎不关心)
• 创建"same"循环函数
• 当输入道具改变时，每次点击都重新渲染所有子元素——假设点击改变了所选的div

Answer 1

我觉得很好。这几乎不可能对性能产生任何影响。但是，如果这是您关心的事情，因为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);
};

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

Answer 2

只要handler不是太复杂，也可以在map中定义，然后在onClick中直接引用。对我个人来说，这甚至使将要发生的事情更加清晰，因为我不需要从一个函数跳到下一个函数来找出答案。

工作演示:

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

<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="react"></div>

PS -我不得不做一些小的改变，因为你的代码在语法上不正确。