为什么我必须为组件创建 index.js 文件？答案

【问题标题】：Why do I have to create index.js file for components?为什么我必须为组件创建 index.js 文件？
【发布时间】：2020-06-12 23:33:38
【问题描述】：

我最近开始了一个 react 项目，我发现一些带有 npm 的 util 命令可以自动生成一些项目。没问题，但是项目结构对我来说有点混乱，所以我在google上搜索了一些解释，一切都很好，我在https://www.pluralsight.com/guides/file-structure-react-applications-created-create-react-app上发现了一些有趣的东西：

虽然组件可以驻留在 src/components/my-component-name 中，但它是建议在该目录中有一个 index.js。因此，每当有人使用 src/components/my-component-name 导入组件，而不是导入目录，这实际上会导入 index.js 文件。

这个 index.js 文件，我应该如何创建它来返回组件？

例如我想为不同的路线创建一些页面：

import React, {Component} from 'react'
class MyPage extends Component{
  render() {
    return (
        <div>
            My Page
        </div>
    );
  }
}
export default MyPage;

现在，index.js 应该是这样的？

import React from "react";
import MyPage from "src/pages/MyPage";

const mypage = () => {
    return <MyPage/>
};

export default mypage;

以及项目结构：

src
 |___pages
       |____MyPage.jsx
       |____index.js

Router 组件应该没有问题，因为我所要做的没有 index.js 就是导入MyPage 并执行以下操作：

<Router>
  <div>
    <Route path="/" component={MyPage} />
  </div>
</Router>

这是创建 index.js 文件的正确方法吗？

【问题讨论】：

谁告诉你的？从字面上看，React 并没有什么能让它“更好”或“更受欢迎”。事实上，将index.js 用于single 组件只是很混乱。如果您有一个允许您说const { MyComponent, SecondaryComponent, ChildThing, AndMore } = require('./components/);` 的索引，那么肯定这很有用，但是对于单个组件，这个建议几乎没有意义。你能引用你的来源吗？
你没有有，它只是让你更容易控制你的模块的界面。这不是 React 特定的，它是通用的 JS。
你的代码和你的js文件没问题；关于index.js | ts | html| jsx | tsx 这正是每个产品和专业人士所期望的方式，没什么特别的；这就是工具和人们习惯和发展的方式。就像早期编程时代的“Hello World”
index.js 文件就像一个容器，您可以在其中呈现页面的所有子组件。这有助于您将代码拆分成更小的块，从而提高可读性和测试
首先，感谢您抽出宝贵时间，但我想我不明白您的回答。好的，从button.js 导入Button 组件不是一个好主意，我明白这一点，但我想强调的是而不是导入目录，这实际上会导入 index.js 文件 i> -> 和我的问题：当您导入组件时，是否会默认查找 index.js 文件？？

标签： javascript reactjs

【解决方案1】：

当您需要从给定文件夹中导出大量组件并且想要解构要导入它们的文件时，最好使用 index.js 文件。您根本不必遵循这一点，但这样做仍然是最佳实践；导出大量文件时会更容易，例如从 Redux 中的 reducer 或具有大量较小组件（如 <Button> 或 <Input> 的实用程序文件夹），并且如果所有内容都更易于其他用户阅读合并成一个索引文件，而不是几个不同的文件。

utilityFile/index.js

export {default as Input} from './Input';
export {default as Button} from './Button';
export {default as TextField} from './TextField';

form.js

import {Input, Button, TextField} from './UtilityFile

index.js 具有特殊属性，如果您从文件中导入，如果没有指定其他内容，javascript 将查找 index.js。任何一种方式都可以，但对于使用 index.js 的更大规模的应用程序来说是首选。

【讨论】：

不应该在form.js 文件中的import 行，读取./index 而不是'./UtilityFile？
如果没有指定文件，节点会在目录中查找 index.js 文件，这很酷。你的问题让我意识到我可以在这方面让我的答案更清楚一点，我已经更新了它。
我在某处读到 import {A,B} from 'x' 影响 tree-shaking 并且多个默认导入更好，例如 import A from 'x'; import B from 'x';。这是真的吗？

【解决方案2】：

source you cite 是关于create-react-app，但作者将自己的观点放在首位，并把它们呈现为既定事实。

如果您确实查看了 create-react-app 文档（这始终是个好主意：从源代码开始，如果官方文档未涵盖您需要的内容，则继续阅读教程知道）例如https://create-react-app.dev/docs/importing-a-component#buttonjs，您会看到它们准确地显示了您的文章所说的不应该做的事情：它正在从名为button.js 的文件中导入<Button> 组件。

无论如何，如果你想要implicit imports，请使用index.js（在某些情况下这样做是个好主意），但create-react-app 不在乎，它并不“建议使用该目录中的 index.js”，而这篇文章只是在误导。添加index.js 是有原因的，它们与create-react-app、一般的React，甚至是类形式的JS 编写实践完全无关。

【讨论】：

【解决方案3】：

这绝对是您可以用来构建组件的策略。如果你想是你的。 index.js 被 webpack 以不同的方式处理，所以你可以只使用 import MyPage from './components/MyPage 而不要使用 import.js。使用这种做法的一种常见方法是从 index.js 中导入然后再次导出组件：

MyPage.js

const MyPage = () => <div>Hello world</div>;
export default MyPage;

index.js

import MyPage from './MyPage.js';
export default MyPage;

【讨论】：