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

Question

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

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

Это так, если 9X_js я создам отдельные файлы CSS для компонентов 9X_html5 React, приложение будет загружаться быстрее, потому 9X_react.js что браузер должен загружать файлы CSS небольшого 9X_ecmascript размера вместо одного большого файла?

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

B

Bunnyhoney

javascript

html

css

reactjs

web

Комментарии:

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

Общее количество ответов: 2

Ответ #1

Ответ #2

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

Да, желательно создавать каждый компонент 9X_react со своей таблицей стилей, а также использовать 9X_div файл модулей CSS, чтобы сделать его областью 9X_www действия. также разделение вашего файла 9X_www CSS предназначено только для удобства чтения, и 9X_react.js для вас, как разработчика, это не имеет 9X_react.js ничего общего с более быстрой загрузкой, потому 9X_react что ваш сборщик сжимает все файлы CSS в 9X_html5 один, чтобы ускорить его загрузку. Надеюсь, мой 9X_websites ответ ясен и достаточно для вашего вопроса.

E

ElenHelen

Ссылка на ответ №2

M MokonaModoki · Accepted Answer · 2023-09-11

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

Вам 9X_html не хватает того, чтобы компоненты можно 9X_websites было повторно использовать.

Если я создаю компонент AwesomeWidget 9X_webpage и хочу перетащить его прямо в другой проект, над 9X_web которым я работаю, тогда я смогу сделать 9X_inline-block это с минимальным трением. И вы не можете 9X_react этого сделать, если его стили смешаны с 9X_ecmascript вещами, специфичными для приложения. Ваши 9X_web компоненты должны быть, насколько это возможно, независимыми 9X_css3 от того, что их окружает.

Храните файлы для 9X_react отдельных компонентов отдельно, и пусть 9X_inline-block Webpack сделает все за вас. Если вы обнаружите, что 9X_css-layout достаточно повторно используете компонент, переместите 9X_js его в собственное хранилище (не забудьте, что 9X_css3 вы можете установить npm с URL-адреса git, если 9X_ecmascript не хотите публиковать его в общедоступном 9X_css-layout реестре пакетов).