Question

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

// 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 => show { {1}}代表Menus。

在这种情况下，如何加快渲染时间？是否可以只声明一次Good/Marginal/Bad？

我认为它不大...仅有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}/>
  }
}

当我在一百行中的每个单元格上放置按钮时，React非常慢

2 个答案: