在呈现函数中使用参数对事件处理程序进行反应：性能问题？

问题描述

所有这些功能都是类的方法，例如App类。而且我在render函数中有一个组件：

{playerList.map((item,index) =>(
<DropdownItem onClick={(e) => this.setRequestParam(item,'Offense','detailed')}
               key = {index}>{item}
</DropdownItem>
)



{targetList.map((item,'Defense','summary')}
               key = {index}>{item}
</DropdownItem>
)

和setRequestParam做：

setRequestParam = (value,paramName,desc) => {
        this.setState({
          params : {
              ...this.state.params,[paramName] : value
            }
          },function setStateCallback(){          
             console.log(this.state.params)

             this.getStatsData(desc)
          }
        ) 
    }

和getStatsData（desc）做：

getStatsData = async (desc) => {

      if (desc === 'detailed'){ .. does something }
      else if (desc === 'summary'){ .. does something }
      else if (desc === 'a different keyword'){... does something}
      ...
}

所以这里的目标是在DropdownItem onclick上发出POST请求，并且我认为当前需要通过事件处理程序发送多个参数。但是，我听说在渲染函数中使用箭头函数很可能导致性能问题。

我听说有多种方法可以在事件处理程序上使用参数，而我见过几种方法：

1. 我使用的那个（箭头功能绑定到渲染器上）

2. 函数返回一个函数

setRequestParam = (value,desc) => 

更改为

setRequestParam = (value,desc) => () => 

因此，做

<DropdownItem onClick={this.setRequestParam(item,'summary')}

仍将传递参数。

1. 将currentTarget与事件配合使用

<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 ) { }
}

所以我的问题是：

1. 考虑到当前情况，必须对下拉项目onclick进行不同的发布请求，我做错什么了吗？还有其他建议吗？
2. 解决方案（2：函数返回一个函数）与解决方案（1：Arorw函数绑定）有什么不同，如“每次渲染时创建函数”一样？
3. 假设我有30个DropdownItem组件，“渲染函数中箭头/绑定函数的性能问题”是否表示
   A）每次渲染父组件时，我都要加载30个函数，堆积起来在浏览器中的某个位置吗？例如，如果我将页面加载100次，我是否在某处堆叠了3000个函数，从而基本上导致了崩溃？
   B）或每个父组件该函数基本上仅重复30次，在卸下组件时也会被卸下，这意味着可以使用有限数量的物品吗？
4. 是否还有其他建议的方式来传递各种内容（可能是字符串变量吗？参数传递给事件处理程序？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）