jsx-no-lambda 警告的几种解决方法
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}/>
))