如果两个组件在 React 中导入相同的 CSS 文件会发生什么？

Question

假设我有两个 React 组件：

import { React } from "react";
import "./styles.css";

function ComponentA() {
  ...
}
export default ComponentA;

---

import { React } from "react";
import "./styles.css";

function ComponentB() {
  ...
}
export default ComponentB;

这两个组件都导入相同的 CSS 文件styles.css。现在假设在我的应用程序中，我导入了这两个组件，因此App.js看起来像这样：

import { ComponentA } from "./ComponentA";
import { ComponentB } from "./ComponentB";

function App() {
  return (
    <div className="App">
      <ComponentA />
      <ComponentB />
    </div>
  );
}

export default App;

这里到底发生了什么？我的应用程序是否导入同一个 CSS 文件两次？如果是这样，我是否只在文件上进行导入App.js？

Answer 1

就好像只导入过一次一样。

当像 Webpack 这样的模块打包器看到 时import，它会将以下路径放入要处理的文件列表中（如果该路径尚不存在）。无论导入多少次，该文件都只会被处理一次。

请注意，使用 React 应用程序，您经常会看到

import React from "react";

在数十或数百个文件中 - React 不会重新创建数百次。相反，模块被处理一次，然后导入它的文件就可以访问 React 导出的内容。

导入 CSS 文件的工作方式相同，因为无论import它们存在多少次，它们都只会被处理一次（尽管它们实际上没有导出，只是有副作用）。

如果两者ComponentA都ComponentB依赖于styles.css，请随意继续导入styles.css两者 - 这不会有什么坏处，并且当您一眼就能看到两个组件都直接依赖于该 CSS 时，会让事情变得更容易管理。