Реакция очень медленная, когда я нажимаю кнопку в каждой ячейке сотен строк

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 => show Menus для Good/Marginal/Bad.

В таком случае, как я могу ускорить время рендеринга?Есть ли способ объявить Button только один раз?

Я думаю, что это не очень ... всего 300 строк.Должен ли я использовать другую библиотеку?Есть ли более простой способ?

Answer 1

Вместо того, чтобы передавать замыкание 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}/>
  }
}

Answer 2

Способ, описанный выше

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

Будет создавать новую функцию каждый раз при рендеринге компонента Button, а каждый повторный рендеринг создает новую функцию в памяти.

Вместо этогоВы можете использовать ссылки на функции и передать их обработчику Button onClick.

Был хороший пост в блоге об этом, , который я обновлю, как только найду его.

Короче говоря, используйте ссылки на функции и для лучшей производительности запомните функцию, чтобы вам не приходилось создавать одну и ту же функцию снова для каждого рендера.