Как я могу динамически внедрить таблицу стилей в React без мерцания / перезагрузки сайта? - PullRequest
0 голосов
/ 08 января 2020

У меня есть приложение React (далее. js), которое получает таблицу стилей из запроса GET и затем добавляет ее на веб-страницу.

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

Есть ли способ предотвратить повторный рендеринг / мерцание / перезагрузку, чтобы что я могу предоставить пользователю беспроблемный просмотр?

1 Ответ

0 голосов
/ 08 января 2020

Попробуйте использовать повторно выберите . Он поддерживает запоминание, и я думаю, что это то, что вы ищете.

React использует поверхностное сравнение для сравнения объектов. Когда приложение загружает новые данные с сервера, оно получает новый объект с данными стилей. Реакт сравнивает его с текущими реквизитами. Даже если этот объект имеет те же данные, для React это будет новый объект, поэтому он решает повторно отрендерить компонент.

При повторном выборе мы сохраняем последний объект, который мы получили ранее, и сравните это с новым. Если новый объект имеет точно такую ​​же структуру, повторный выбор отправит старый объект (памятный объект) компоненту. Таким образом, компонент получит тот же объект, и он не будет перерисован.

Обычно повторный выбор используется с Redux, но в соответствии с их часто задаваемыми вопросами он может использоваться независимо:

Q: Могу ли я использовать реселект без Redux? A: Да. Реселект не имеет зависимостей ни от какого другого пакета, поэтому, хотя он был разработан для использования с Redux, он может использоваться независимо. В настоящее время он успешно используется в традиционных приложениях Flux

...