jsx-no-lambda 警告的几种解决方法

jsx-no-lambda 的存在是因为 jsx 中 lambda会造成性能的损耗

列表添加事件tslint检查不通过问题

// 复现
[1,2,3,4].map(item => (
    <p key={item} onClick={ ()=>{_delete(item) }}>{item}</p> 
    // { ()=>{_delete(item) }} 警告
    // Lambdas are forbidden in JSX attributes due to their rendering performance impact (jsx-no-lambda)
))

1.直接关闭

"rules": {
    "jsx-no-lambda": [ false ]
}

2.使用闭包解决

const handleDelete = (id) => (event)=>_delete(id)
[1,2,3,4].map(item => (
    <p key={item} onClick={ handleDelete(item) }>{item}</p>
))

问题： 每次都会产生一个闭包

3.通过事件委托

function hendleDelete(event){
    const target = event.target;// 获取dom
   // 一些判断
   const id =  target.getAttribute('data-id'); // 获取属性
   // 调用
   _delete(id)
}
<div onClick={hendleDelete}>
{
[1,2,3,4].map(item => (
    <p key={item} data-id={item}>{item}</p>
))
}
</div>

问题：react中本身就是事件委托所有并不能对性能有优化、且ReactEvent target的 ts类型定义中 只有 addEventListener dispatchEvent removeEventListener三个属性 不是dom的定义所以可能会造成[-错误-]而非警告

4.使用bind绑定参数

[1,2,3,4].map(item => (
    <p key={item} onClick={ _delete.bind(this,item) }>{item}</p>
))

问题： bind每次渲染都会绑定一次性能可能会降低，且函数的上下文可能没有办法正确绑定还有可能会导致 jsx-no-bind 的警告

5.将子组件封装再触发prop

function Test({data,onClick}){
    function handlteClick(){
        _delete(data);
    }
    return  <p  onClick={ handlteClick }>{data}</p>
}
[1,2,3,4].map(item => (
   <Test data={item} key={item} onClick={_delete}/>
))