Зачем использовать отдельные CSS файлы для компонентов в React. js

Question

Я новичок в веб-разработке и в настоящее время изучаю React. js. Я узнал о том, как создавать компоненты в React и назначать им стили.

Похоже, что если я создаю отдельные CSS файлы для компонентов React, приложение будет загружаться быстрее, потому что браузер должен загружать небольшие файлы. CSS файлов вместо одного большого файла?

Я хочу спросить о том, как React загружает файлы CSS в браузере и нужно ли использовать отдельные CSS файлы для компонентов React.

Answer 1

Да, вы хотите отдельные файлы. Нет, причина, почему вы делаете это не для производительности (хотя это, безусловно, может повлиять на производительность).

Вам не хватает, что компоненты должны быть повторно usable .

Если я создаю компонент AwesomeWidget и хочу перенести его прямо в другой проект, над которым я работаю, тогда я смогу сделать это с как можно меньшим трением. И вы не сможете этого сделать, если его стили смешаны с указанными в приложении c вещами. Ваши компоненты должны быть, насколько это возможно, независимыми от того, что их окружает.

Храните отдельные файлы c, специфичные для компонента, и пусть Webpack сделает всю работу за вас. Если вы обнаружите, что используете компонент достаточно много раз, переместите его в его собственный репозиторий (не забудьте, что вы можете npm установить с git URL-адреса, если вы не хотите публиковать sh его в паблике c реестр пакетов).

Answer 2

Вы можете импортировать CSS непосредственно в компонент.

Пример: import './style.css'

Или вы можете использовать styled-component библиотека для работы с CSS Рекомендую.

Answer 3

В папке вашего проекта вы увидите индекс. css или приложение. css, напишите там свой стиль. Пример

.divcontainer {}

Так что теперь в вашем классе, когда вы хотите использовать стиль css, используйте в теге class = «divcontainer», а не className = «divcontainer»

Answer 4

да, предпочтительно сделать каждый компонент со своей таблицей стилей, а также использовать файл CSS modules для его определения. Кроме того, разделение вашего CSS файла предназначено только для удобства чтения, и вы, как разработчик, не имеете ничего общего с более быстрой загрузкой, потому что ваш упаковщик сжимает все CSS файлы в один, чтобы ускорить его загрузку. Я надеюсь, что Мой ответ ясен и достаточен для вашего вопроса.