假设我有两个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文件上进行导入?

推荐答案

就好像它只进口过一次一样.

当像webpack这样的模块Bundle 器看到import时,它会在要处理的文件列表中放入以下路径if the path doesn't exist already.文件只处理一次,无论导入多少次.

请注意,使用Reaction应用程序时,您会经常看到

import React from "react";

在数十或数百个文件中-Reaction不会被重新创建数百次.相反,该模块被处理once,然后导入该模块的文件被给予访问REACT已经导出的内容的权限.

导入css文件的方式也是一样的,因为无论它们存在多少次import,它们都只被处理一次(尽管它们并没有真正的exports,只是副作用).

如果ComponentAComponentB都依赖于styles.css,那么可以继续在这两个组件中导入styles.css--这不会有什么坏处,而且当您一眼就能看到这两个组件都直接依赖于该css时,这将使事情更容易管理.

Reactjs相关问答推荐

无法在jest中发布行动

为什么我的标签在Redux API中不能正常工作?

Formik验证不适用于物料UI自动完成

为什么登录错误和密码在创建Reaction-Hook-Form后立即被删除?

状态改变不会触发重新渲染

如何清除过滤器搜索的状态

使用获取的数据更新状态,但在try console.log 时它给出未定义

对于 ref 上的可见 prop 或 open 方法来react 组件,哪种方式更好?

使用reactrouterdom时显示"对象无效作为React子组件"错误

useState数组不更新

React 组件列表中的第一个计时器正在获取值 NaN

Zod 验证模式根据另一个数组字段使字段成为必需字段

如何在不使用 Axios 的情况下将图像文件从 React.js 发送到 Spring Boot Rest API?

使用 toast 时挂钩调用无效

如何在 React Native 中更新跨屏幕呈现的上下文状态变量?

React Final Form - 单选按钮在 FieldArray 中不起作用

调用 Statsig.updateUser 时 UI 不呈现

如何在react 日历中自定义带有圆形边框的日期项?

在 React 中使用使用状态挂钩合并两个数组

npm init vite@latest 和 npm init vite 有什么区别?