Javascript 使用呈现函数中的参数响应事件处理程序:性能问题?
所有这些函数都是类的方法,比如说App类。我在渲染功能中有一个组件:Javascript 使用呈现函数中的参数响应事件处理程序:性能问题?,javascript,reactjs,Javascript,Reactjs,所有这些函数都是类的方法,比如说App类。我在渲染功能中有一个组件: {playerList.map((item,index) =>( <DropdownItem onClick={(e) => this.setRequestParam(item,'Offense', 'detailed')} key = {index}>{item} </DropdownItem> ) {targetList.map((item,index
{playerList.map((item,index) =>(
<DropdownItem onClick={(e) => this.setRequestParam(item,'Offense', 'detailed')}
key = {index}>{item}
</DropdownItem>
)
{targetList.map((item,index) =>(
<DropdownItem onClick={(e) => this.setRequestParam(item,'Defense', 'summary')}
key = {index}>{item}
</DropdownItem>
)
和getStatsData(desc)执行以下操作:
因此,这里的目标是对DropdownItem onclick发出POST请求,我觉得目前需要通过事件处理程序发送多个参数。不过,我听说在渲染函数中使用箭头函数很可能会导致性能问题我听说有多种方法可以在事件处理程序上设置参数,我看到了几种方法:
setRequestParam = (value, paramName, desc) => () =>
这样做
<DropdownItem onClick={this.setRequestParam(item,'Defense', 'summary')}
{
如果(e.currentTarget.name=='defenseSummary'){
这是我的国家({
参数:{
…this.state.params,
“防御”:e.currentTarget.getAttribute(“dropdownvalue”)
}
},函数setStateCallback(){
console.log(this.state.params)
此.getStatsData('摘要')
}
)
}
如果(…对于不同的参数可能){}
}
因此,我的问题是:
A)每次渲染父组件时,我都会加载30个函数,这些函数会堆积在浏览器中的某个位置吗?比如说,如果我加载页面100次,是否有3000个函数堆积在一起,导致Guaranteed崩溃
B)或者该功能基本上只是每个我的父组件重复30次,当组件卸载时,该功能也会卸载,这意味着它可以使用有限数量的项目
setRequestParam = (value, paramName, desc) =>
setRequestParam = (value, paramName, desc) => () =>
<DropdownItem onClick={this.setRequestParam(item,'Defense', 'summary')}
<DropdownItem onClick={this.setRequestParam}
name = 'defenseSummary'
>
setRequestParam = (e) => {
if (e.currentTarget.name === 'defenseSummary'){
this.setState({
params : {
...this.state.params,
'Defense' : e.currentTarget.getAttribute("dropdownvalue")
}
}, function setStateCallback(){
console.log(this.state.params)
this.getStatsData('Summary')
}
)
}
else if ( .. for different parameter possible ) { }
}