0

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

state = {
    tableData: [],
    modaShow:  true/false
}

Когда я открываю модалку, я меняю состояние в родительском элементе modalShow: true, что заставляет таблицу перерисовываться тоже. Когда данных много, рендеринг заметно тормозит. Как можно запретить перерендеринг таблицы в момент открытия модального окна?

1
  • Похоже, что у вас свойство modalShow передаётся в компонент, который отрисовывает таблицу. Если убрать передачу этого свойства в компонент с таблицей, то и обновляться этот компонент не будет. 23 мар 2018 в 12:56

1 ответ 1

2

Если таблица находится в той же компоненте где и происходят изменения modalShow, то вынести ее в отдельную компоненту и передавать в props только tableData.

  • Если таблица статичная (нужно отрисовать только 1 раз и никаких изменений не вносить), то можно добавить

    shouldComponentUpdate() {
        return false;
    }
    
  • Если таблица динамически изменяется, то внутри shouldComponentUpdate() сравнивать tableData и в зависимости от результата перерисовывать или нет компоненту.

    shouldComponentUpdate(nextProps) {
        // вместо !== будет какое то сравнение между this.props.tableData и nextProps.tableData
        return this.props.tableData !== nextProps.tableData
    }
    

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.