#reactjs #html-table #material-ui
#reactjs #html-таблица #материал-пользовательский интерфейс
Вопрос:
В моем приложении есть таблица пользовательского интерфейса Material с 100 записями, и в каждой строке содержится довольно много данных для рисования. Пожалуйста, посмотрите пример ниже. Данные также обновляются с помощью функции setInterval со скоростью 2000 мс.
https://stackblitz.com/edit/react-ts-9k8gnl?file=Hello.tsx
При заданной высоте таблицы <TableContainer style={{ height: '500px', width: '100%' }}> производительность приложения очень низкая. Пользователи не могут даже плавно прокручивать до самого низа.
Однако, когда я удаляю style={{ height: '500px', width: '100%' }} атрибут, производительность прокрутки удовлетворительная.
В чем причина этого и как я могу улучшить производительность, когда у меня установлена высота.
Я использую последние версии react и MUI.
Комментарии:
1. Я удалил свой ответ, поскольку в вашем случае он бесполезен, и надеюсь получить правильный ответ.