Как сделать DetailsList более производительным при отображении пользовательского компонента в столбцах? - PullRequest
0 голосов
/ 28 февраля 2020

Я пытаюсь отобразить не очень большой DetailsList (что-то между 100-200 строками), где у меня есть пользовательский столбец с компонентом CommandBar. Одним из действий является действие удаления, которое удаляет саму строку. Проблема, с которой я сталкиваюсь, заключается в том, что после того, как я щелкну, чтобы удалить строку, код займет больше времени, которое я ожидал бы перерисовать, создавая ощущение медленной системы.

Работая в dev, я получаю довольно медленное исполнение, что довольно неприятно. (Моя машина - i7 с 16GbRam, так что проблема не должна быть в моей машине).

Запуск в производстве, хотя я получаю «нормальную» производительность, но не такую ​​высокую, как хотелось бы.

Пример кода: https://codepen.io/pedro-beslogic/pen/eYNWLLo

Я прокомментировал строку 141, чтобы проиллюстрировать то, что я считаю отличной производительностью

Файл профиля реагирования : https://beslogic-my.sharepoint.com/: u: / p / pedro_ferreira / EQ-P0K6-uYZFqhPNIcMtbmsBNWU6CUXrQjuexCPhPkibpQ? E = JMjnoa

Chrome файл производительности : 1026 1026 *: u: / p / pedro_ferreira / EbogBtQwPWVCpwCrIIFfAdYBsOX1BlYB0cOWl7Zy1KwanA? e = Z53Qyi

Я что-то не так делаю или это лучший способ повысить производительность таблицы?

1 Ответ

0 голосов
/ 09 марта 2020

Я получил ответ после открытия вопроса на их gitHub. Вместо использования компонента CommandBar внутри DetailList мы можем использовать компонент IconButton с опорой menuProps.

...