Как стилизованные компоненты влияют на производительность?
Использование стилизованных компонентов замедляет работу веб-приложения больше, чем таблицы стилей?
Если мне важна производительность и у меня нет стилей, зависящих от реквизита, следует ли мне просто отказаться от стилизованных компонентов и вместо этого использовать таблицы стилей?
Ответы 2
Всегда будут накладные расходы немного для библиотеки CSS-in-JS времени выполнения, поскольку она в конечном итоге выполняет больше работы. Но за эти накладные расходы вы также получаете большую гибкость и мощность.
В каждом выпуске мы улучшали производительность библиотеки до такой степени, что разница была относительно незаметной (особенно при рендеринге на стороне сервера).
Вам решать, какая реализация больше всего подходит для вашего проекта; Если все ваши стили на самом деле статичны, то подход на чистом CSS определенно будет наиболее эффективным. Но здесь есть свои предостережения в отношении управления таблицами стилей, написания эффективных селекторов и т. д.
Я сразу вижу разницу, переключил один компонент на использование стилизованных компонентов и избавился от множества головных болей, скачков лагов, дрожания на мобильных устройствах, огромной разницы в производительности. Продемонстрируйте это на небольшом проекте, прежде чем совершите ошибку, которую совершил я. Прежде чем вы спросите, да, это приложение оптимизировано, сжато и т. д. Это даже не быстрее, чем просто написание стилей объектов jsx.
Когда у вас много маленьких компонентов, использующих визуализацию стилизованных компонентов, в то же время накладные расходы на производительность могут быть значительными. Определенно стоит протестировать, чтобы удалить стилизованный компонент на небольших элементах.
Я использовал стилизованный компонент для ячеек / строк таблицы, который может генерировать 27260 span (ячейка) за один раз. Используя профилировщик React, для создания моей таблицы потребовалось около 1050–1250 мсек, а после удаления стилизованного компонента из строк и ячеек - 600–630 мсек.
Я определенно видел то же самое.
Интересно узнать, есть ли какие-либо последствия для производительности при использовании его с react-native, поскольку модель для установки правил стилей на этой платформе полностью отличается от веб-