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

我最近启动了一个react项目，我发现一些使用npm的util命令可以自动生成一些项目。这没问题，但项目结构对我来说有点混乱，所以我在谷歌上搜索了一些解释，一切都很好，我在上面找到了一些有趣的东西：

虽然组件可以驻留在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我只需导入

MyPage

并执行如下操作：

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

---

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

当您有许多组件需要从给定文件夹导出，并且希望在导入到的文件中对其进行分解时，可以使用index.js文件。你根本不必遵循这一点，但这样做仍然是最佳实践；当导出大量文件（例如从Redux中的reducer或包含大量较小组件（如

或

）的实用程序文件夹）时，会更容易，如果所有内容都合并到一个索引文件而不是多个不同的文件中，则其他用户更容易阅读

index.js

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

---

index.js具有特殊属性，如果从文件导入，javascript将在未指定其他内容的情况下查找index.js。无论哪种方法都可以，但对于使用index.js的大型应用程序，您更愿意使用它。

这绝对是一种构建组件的策略。如果你想，这取决于你自己

index.js

被webpack以不同的方式处理，因此您可以从“/components/MyPage导入MyPage，并将

import.js

放在一边。使用这种做法的一种常见方法是只导入组件，然后从index.js再次导出组件：

MyPage.js

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

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

这是关于

创建react app

，但作者将自己的观点放在首位，并将其呈现出来，就好像它们是既定事实一样

如果您实际查看了

create react app

文档（这总是一个好主意：从源代码开始，如果官方文档没有涵盖您需要了解的内容，则转到教程），例如，您可以看到它们精确地显示了您的文章所说的不要做的事情：它从名为

button.js

的文件中导入了

组件

---

无论如何，如果你想的话，可以使用

index.js

（在某些情况下这样做是一个很好的主意），但是

create react app

不在乎，它不“建议在该目录中有一个index.js”，这篇文章只是误导。添加

index.js

，是有原因的，它们与

create-react-app

、react-in-general，甚至是以课堂形式编写js的实践完全无关。

谁告诉你的？事实上，React并不能让这个“更好”或“更受欢迎”。事实上，对单个组件使用

index.js

只是一种混乱。如果您有一个索引，允许您说

const{MyComponent、SecondaryComponent、ChildThing和more}=require（'./components/

）；`，当然这是有用的，但是对于单个组件来说，这个建议没有什么意义。你能举出你的来源吗？你不必，它只是让你更容易控制你的模块接口。这不是React-specific，而是通用的JS；关于

index.js | ts | html | jsx | tsx

这只是每个产品和专业人士期望的方式，没有什么特别的；这就是工具和人们习惯和进化的方式。就像早期编程时的“Hello World”

index.js

文件就像一个容器，可以在其中呈现页面的所有子组件。这有助于将代码分成更小的块，从而提高可读性和测试性首先，感谢您抽出时间，但我不认为我理解您的答案。好的，从

Button.js

导入

Button

组件不是一个好主意，我理解这一点，但我想强调的是，不是导入目录，而是导入index.js文件->和我的问题：导入组件时默认情况下是否在查找index.js文件？？

form.js

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

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

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