Reactjs 当我把按钮放在一百行的每个单元格上时，反应非常慢

我有300行，每行有15列。每个单元格都有添加数据的按钮。为了你宝贵的时间，我做了一把小提琴

//行是300长度的数组。
//cols是长度为15的数组。
//您可以在沙箱上面看到整个代码
{months.map（el=>{el}}
{rows.map（（row，rowIndex）=>{
返回(
{cols.map（（el，colIndex）=>(
警报（“您单击了”+rowIndex+“X”+colIndex）
}
>
点击我
))}
);
})}

每个单元格可以有一个['Good'，'Marginal'，'Bad']

实际上，我第一次想使用like，但我认为这可能会导致用户输入错误的值，如

goood

，因此我改为使用

按钮
=>显示
菜单
，以显示
好的/边缘的/坏的

在这种情况下，如何加快渲染时间？有没有办法只声明一次
按钮

我认为它不是很大。。。只有300行。我应该使用另一个图书馆吗？有更简单的方法吗？
上面的方法

<Button
 onClick={() => alert("You clicked " + rowIndex + " X " + colIndex) }>
   Click Me
</Button>

alert（“您单击了”+rowIndex+“X”+colIndex）}>
点击我

将在每次渲染按钮组件时生成一个新函数，并且每次重新渲染都将在内存中生成一个新函数

相反，您可以使用函数引用并将其传递给
按钮
onClick处理程序

有一个关于它的好消息，我会在找到它后更新

简而言之，使用函数引用，为了获得更好的性能，请记住函数，这样就不必为每个渲染再次创建相同的函数
 而不是将闭包onClick传递给每个按钮，而是将相同的函数传递给每个按钮，这样按钮的实现如下所示

class CustomButton extends React.Component{
  shouldComponentUpdate({children}){
    if(children !== this.props.children){
      return true;
    }
    return false;
  }
  onClick=(e)=>{
    const {onClick, rowIndex, colIndex} = this.props;
    onClick(e, {rowIndex, colIndex});
  }
  render(){
    return <button {...this.props} onClick={this.onClick}/>
  }
}

class CustomButton扩展了React.Component{
shouldComponentUpdate（{children}）{
if（children！==this.props.children）{
返回true；
}
返回false；
}
onClick=（e）=>{
const{onClick，rowIndex，colIndex}=this.props；
onClick（e，{rowIndex，colIndex}）；
}
render（）{
回来
}
}
在性能方面，您应该使用可能的副本来有效地维护大型列表。@bOjendraauniyar这与react native无关。@AdeelImran dup帖子显然会帮助OP。不过，收回了我的投票。当移动到数据网格而不是“映射”每个参数时，我的结果会非常好。我也尝试过@javed的解决方案。它确实有帮助，但不如用于大约200行和10个字段的datagrid好
class CustomButton extends React.Component{
  shouldComponentUpdate({children}){
    if(children !== this.props.children){
      return true;
    }
    return false;
  }
  onClick=(e)=>{
    const {onClick, rowIndex, colIndex} = this.props;
    onClick(e, {rowIndex, colIndex});
  }
  render(){
    return <button {...this.props} onClick={this.onClick}/>
  }
}