当我把按钮放到100行的每个单元格时，React非常慢

Question

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

https://codesandbox.io/s/y0j4w79mz9

// rows is 300 length array. 
// cols is 15 length array. 
// you can see whole code above sandbox

<Table className={classes.table}>
        <TableHead>
          <TableRow>{months.map(el => <TableCell>{el}</TableCell>)}</TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row, rowIndex) => {
            return (
              <TableRow key={row.id}>
                {cols.map((el, colIndex) => (
                  <TableCell component="th" scope="row">
                    <Button
                      onClick={() =>
                        alert("You clicked " + rowIndex + " X " + colIndex)
                      }
                    >
                      Click Me
                    </Button>
                  </TableCell>
                ))}
              </TableRow>
            );
          })}
        </TableBody>
      </Table>

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

实际上我第一次想使用像React Datasheet，但我认为这有可能用户输入错误的值像Gooood所以我改为这样的方式Button =>显示Menus为Good/Marginal/Bad。

在这种情况下，我怎样才能加快渲染时间？有没有办法只宣告一次Button？

我认为它不是很大......只有300行。我应该使用其他图书馆吗？有没有更简单的方法？

Answer 1

它的做法如上所述

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

每次呈现Button组件时都会创建一个新函数，每次重新渲染都会在内存中创建一个新函数。

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

关于它有一个很好的blog post， 一旦找到它我会更新。

简而言之，使用函数引用并获得更好的性能，请记住该函数，以便您不必为每个渲染再次创建相同的函数。

Answer 2

而不是将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}/>
  }
}