关于React的回调事件与eslint规范的一点疑问

Question

由于我使用的typescript开发，所以代码规范用的tslint，当然它继承了eslint的规范，其中有两项规范是jsx-no-lambda和jsx-no-bind，，似乎是由于每于每次渲染都会创建一个新的函数实例，为了提升一些性能，所以推荐不要使用，我考虑过也觉得确实有一些道理，也是尽量将bind放到外面或使用箭头函数创建回调函数，但是当使用数组的map循环的时候，有时候回调事件里需要传当前迭代的值，这种就没有办法了，必须使用bind或()=>回调函数(传值)，想知道这个时候有什么方式来解决吗？

Answer 1

• 封装成一个组件，把回调和要传的值作为 props 传进去。
• 去掉规范。

Answer 2

本来一个随意的语言，非要整各种规范。我是特别讨厌语法检测

Answer 3

有时候不是不会，而是想象不到，最近无意中看到柯里化的概念，完全可以增加一个函数来处理这个问题，给需要的人一个小小的参考。

其伪代码如下

const arr = [1,2,3];

function currying(item){
    return (ev) => clickHandle(item);
}
...省略React组件的函数或类的声明
//原来的写法， eslint禁止使用箭头函数，抛出警告
{
    arr.map((item, key)=><div onClick={(ev)=>clickHandle(item)} key={key}>{item}</div>)
}
//使用柯里化概念的写法，没有使用箭头函数，无警告
{
    arr.map((item, key)=><div onClick={currying(item)} key={key}>{item}</div>)
}

有时候感觉代码规范化，会与最优性能不可兼得，直接使用箭头函数肯定要比函数再返回一个函数更好，当然这种性能损耗是可以忽略不计的，另外本人对柯里化的概念理解得不是很透，看了一些文章，就只有一个感觉，觉得这是一种不是太有必要的东西，其应用场景应该是有限的，不过在某些场景下比较好用。