将所有组件导出到index.js文件中是不是一种糟糕的做法

Question

我将所有组件导出到一个index.js文件中。这意味着我可以通过执行以下操作将组件导入到任何其他文件中。这既简单又干净。

import { RocketCard, Container, Navbar, Button01 } from './Components/index';

这就是我的index.js文件的样子。在这里我导入和导出所有组件。

import { RocketCard } from "./Cards/RocketCard"
import { SmallLabel } from "./SmallLabel"
import { StatusLabel } from "./StatusLabel"
import { Button01 } from "./Button01"
import { List } from "./hoc/List"
import { SearchBar } from "./SearchBar"
import { Container } from "./Layout/Container"
import { Navbar } from "./Layout/Navbar"
export { RocketCard }
export { SmallLabel }
export { StatusLabel }
export { Button01 }
export { List }
export { SearchBar }
export { Container }
export { Navbar }

这种做法不好吗？它会以任何方式降低我的应用程序的速度吗？

谢谢。

Answer 1

很难说哪个是正确的，这取决于项目和团队中的安排。我只是说我会做什么和我的意见。

我认为在一个文件中指定所有内容是不对的，因此，结构会丢失，在大型项目中这很重要。

是的，现在您可以从一个文件导入所有内容，但以文件和文件夹的形式创建结构是一件简单但重要的事情。

我给你举个例子。当我导入BUTTON并在导入路径中看到它来自共享文件夹时，我就知道这是一个到处都在使用的共享按钮。但我也可以从HERO-BANNER文件夹导入BUTTON，并理解这是HERO组件的一个独特按钮。像导入路径这样简单的东西会让生活变得更轻松。

我不是建议你放弃这个想法，但我建议你稍微改变一下。

我看到你有一个"Cards"文件夹，很棒，在里面创建一个index.js，并从Cards文件夹导出其他地方需要的组件。

与"HOC"文件夹相同。

我看到您在与当前Index.js文件相同的文件中有4个组件。我知道这些都是常见的组件。我建议创建一个共享文件夹，将它们放在那里，并在那里创建一个index.js文件，导出这些共享组件。

对"layout"文件夹执行同样的操作，在那里创建自己的组件导出文件。

总的来说，这个想法很好，但需要一些细节。(

// Create index.js file inside Cards folder with this content.
export { RocketCard } from './RocketCard'
// Create index.js file inside HOC folder with this content.
export { List } from './List'
// Create shared folder and index.js with this content in shared folder
export { SearchBar } from './SearchBar'
export { SmallLabel } from './SmallLabel'
export { StatusLabel } from './StatusLabel'
export { Button01 } from './Button01'
// Create index.js file inside Layout folder with this content.
export { Container } from './Container'
export { Navbar } from './Navbar'