Показать сообщение отдельно
  #1 (permalink)  
Старый 15.04.2025, 23:15
Аватар для fxobject
Кандидат Javascript-наук
Отправить личное сообщение для fxobject Посмотреть профиль Найти все сообщения от fxobject
 
Регистрация: 01.03.2021
Сообщений: 145

вопрос стратегии React
Уважаемые форумчане! Ну что ж вы такие пассивные?
Подскажите, наверняка сталкивались со следующим вопросом:
на Vue была ранее реализована таблица. Неважно что там и как - достаточно, что в ней стилем подсвечивается строка и клавиатурой можно управлять этой строкой. двигаться так сказать по строкам таблицы.
Перевел задачу на React. И сразу столкнулся с производительностью. В Vue нажимаем и держим клавишу - бежит ровненько и быстренько. В React - движение замедленно и какие то строки "проглатываются". В смысле 1,2 3. перескакивает на 5 и т.д.
Понимаю - вопрос отрисовки и взаимодействие компонентов. Подскажите стратегически как правильно решать подобные задачи.
Как решено:
Таблица выводится в отдельном компоненте. Данные для нее поступают как props.
render таблицы осуществляется map в котором каждый элемент является отдельной компонентой - row (в нем осуществляется вывод строки)
для компонента row - данные поступают как props
события нажатия обрабатываются в компоненте table (делать в row) было бессмысленно, все равно пришлось бы "выходить" на уровень table
итак в обработчике нажатия клавиши setState изменение текущей активной строки и далее пошла отрисовка всей!!!! таблицы.
Тут также замечу, что отрисовка происходит, даже если меняется переменная из state, которая ну никак не задействована в выводе. Просто - есть setState - есть отрисовка.
Далее в row также задействована процедура shouldComponentUpdate
которая возвращает true только для прошлой текущей активной строки и новой будущей. по идее отрисовка должна проходить только для двух строк. ну я так думаю.....
но все таки медленно....... пока остановка... чух чух чух. подскажите стратегию!!!
Ответить с цитированием