为啥在 React.js 中为组件使用单独的 CSS 文件

Posted 2023-02-22

【中文标题】为啥在 React.js 中为组件使用单独的 CSS 文件

【英文标题】：Why to use separate CSS files for components in React.js为什么在 React.js 中为组件使用单独的 CSS 文件

【发布时间】：2020-06-13 07:54:43

【问题描述】：

我是 Web 开发的新手，目前正在学习 React.js。我学习了如何在 React 中创建组件并为它们赋予样式。

如果我为 React 组件创建单独的 CSS 文件，是否会因为浏览器必须加载小尺寸的 CSS 文件而不是单个大文件而加载应用程序更快？

我想问一下 React 如何在浏览器中加载 CSS 文件，以及我是否应该为 React 组件使用单独的 CSS 文件。

【问题讨论】：

加载 CSS 文件将是打包者的职责，而不是 React 的职责。如果您的捆绑程序执行code splitting，则拥有单独的CSS 文件实际上可能是有益的，因为您可能不想一次加载所有CSS，而是根据需要以更小的块加载。使用带有 CSS Modules 之类的单独 CSS 文件是最好的方法，因为您正在创建组件并希望将事物封装起来，而不是影响其他地方/全局的事物。

【参考方案1】：

是的，您需要单独的文件。不，您这样做的原因不是为了性能（尽管它肯定可以对性能产生影响）。

你错过了组件应该是可重复使用的。

如果我创建了一个 AwesomeWidget 组件，并且我想将它直接放入我正在处理的另一个项目中，那么我应该能够以尽可能少的摩擦来做到这一点。如果它的样式与特定于应用程序的东西混合在一起，你就不能这样做。您的组件应该尽可能独立于它们周围的东西。

将特定于组件的文件分开，让 Webpack 为您完成所有连接的工作。如果你发现自己重用了一个组件，那么将它移到它自己的 repo 中（不要忘记，如果你不想将它发布到公共包注册表，你可以从 git url npm install）。

【讨论】：

“它与性能无关（尽管它肯定会对性能产生影响）”所以性能会受到影响吗？

@goto1 性能可能会受到影响，但那里有很多“取决于”。你在捆绑吗？如何？ HTTP 1 还是 2？缓存/CDN？性能问题没有简单的通用答案，但重用/灵活性参数始终适用。换句话说，虽然拥有单独的 CSS 文件会影响性能，但这不是您应该这样做的原因。我编辑希望澄清我的意思。

谢谢@JaredSmith。当我问这个问题时，我没有考虑可重用性因素。现在很清楚了。

为了使其更可重用，将样式保存在同一个文件中不是更有意义吗？让我们以您的场景为例。 AwesomeWidget.ts 只有组件逻辑并从 './styles' 导入样式。如果你只是复制 AwesomeWidget.ts 并将其放到一个新项目中，它仍然会尝试从 './styles' 导入样式。所以它不能开箱即用，现在你也需要连接样式。而如果它们都在同一个文件中，您可以复制/粘贴该文件。

@Stigasaur 你的组件的样式应该与它的模板和脚本捆绑在它自己的文件夹中，这样相对导入就不会失败。大多数组件库还鼓励/要求命名约定以使关系更加明确。一旦它被调试并在一个工作项目中使用，理想情况下它应该是一个你使用 npm 安装的包（来自公共注册表、私有注册表，甚至是 git url），而不是你手动管理文件系统上的文件的东西。

【参考方案2】：

是的，最好使用其样式表来制作每个组件，并使用 CSS 模块文件来使其具有范围。分离 CSS 文件也只是为了便于阅读，对于作为开发人员的您来说，这与加载速度无关，因为您的捆绑程序会将所有 CSS 文件压缩成一个文件以使其加载速度更快。我希望我的回答很清楚，足以回答您的问题。

【讨论】：

这不仅仅是可读性（尽管你肯定是对的，而且捆绑）。还有易于重用，请参阅我的答案。

@JaredSmith 完全同意你的观点，我忘了我们可以根据需要每次重用组件。

作为开发人员，可读性是影响我工作效率的最具决定性的属性之一。带有巨大样式表的组件让我感到恶心。不过，这完全是个人喜好。

【参考方案3】：

在您的项目文件夹中，您将看到 index.css 或 app.css，在那里写下您的样式。示例

.divcontainer

所以现在在你的课堂上，只要你想使用 css 样式 在标签中使用 class="divcontainer" 而不是 className="divcontainer"

【参考方案4】：

您可以将 CSS 直接导入组件中。

示例： 导入'./style.css'

或者您可以使用 styled-component 库来处理我推荐的 CSS。