Django+React全栈开发：代码组织（react代码结构）
好久没有更新博客了，现在终于有时间写了，以后尽量周更
ES6模块
习惯使用Django框架后，对于模块化编程的好处想必大家都深有体会，尤其是当你曾经将大量的逻辑写在同一个文件甚至同一个函数中，到了某个时间点需要去修改这个程序中某个功能的时候。
在JavaScript中，我们也可以利用模块分割代码，优化我们的应用结构。以之前的代码为例：
import { Switch, Link, Route} from "react-router-dom"import About from "./About"import ArticleDetail from "./ArticleDetail"
ES6有import与export语句对应导入与导出，值得注意的是，以上代码中可以看到import语句有两种不同的写法，让我们先来看看如何导出：
// a.jsconst mode = 'default'const age = 54export {mode, age}// 也可以在定义变量时直接导出export foo = () => { console.log("hello")}// 以上导出方式对应的导入import { mode, age } from './b.js'// 可以使用通配符*与as将a中导出的全部内容导入为一个对象import * as Foo from './b.js'// 使用as避免命名冲突或避免过长的名称import { mode as aMode } from './b.js'
以上导出方式对应了我们之前代码中需要花括号的导入方式，还有一种default语句：
const User = { username: 'elliot', email: 'hack00mind@gmail.com'}// 注意一个文件中只能有一个export defaultexport default User// 但是可以与export一起用export const year = 2020// 导入default的名称可以省略花括号import User, { year } from './foo.js'
代码组织
在React中，我们将页面拆分成多个不同的组件，我们已经大致将不同的功能、不同页面的组件放到了不同文件中，这些代码都在src目录下，但在工作中，随着业务的增长，我们要考虑将组件拆分到更多不同的模块中去。
src├── About.js├── App.css├── App.js├── App.test.js├── ArticleDetail.css├── ArticleDetail.js├── ArticleList.css├── ArticleList.js├── index.css├── index.js├── logo.svg├── serviceWorker.js└── setupTests.js
现在我们的文件已经略显凌乱了，虽然我们已经将一些不同的组件拆分到了不同的文件中，但是不同名称的不同文件混在了一起，看上去还是不舒服。
我们可以将同一个组件相关的代码文件，样式文件，测试文件放到同一个文件夹中：
├── About│ └── index.js├── App│ ├── index.css│ ├── test.js│ └── index.js├── ArticleDetail│ ├── index.css│ └── index.js├── ArticleList│ ├── index.css│ └── index.js├── index.css├── index.js├── logo.svg├── serviceWorker.js└── setupTests.js
现在我们的文件在结构上要更加清晰些，或者还可以如下所示：
├── components│ ├── About│ │ └── index.js│ ├── App│ │ ├── index.css│ │ ├── test.js│ │ └── index.js│ ├── ArticleDetail│ │ ├── index.css│ │ └── index.js│ └── ArticleList│ ├── index.css│ └── index.js├── constants│ └── index.js├── index.css├── index.js├── logo.svg├── serviceWorker.js└── setupTests.js
注意到原本的组件文件名都被改成了index.js，这是node项目中入口文件的默认文件名，当然你可以改成自己想要的其它名称。当使用这个默认名称时，在导入时可以省略index.js：
import React from 'react'import { Switch, Link, Route} from "react-router-dom"// 注意文件位置变动，引入时相对路径要修改import './App.css'import ArticleList from "../ArticleList"import About from "../About"import ArticleDetail from "../ArticleDetail"
考虑下列场景：
/*文件结构如下./Buttons├── CancelButton.js├── index.js└── SubmitButton.js*/// Buttons/index.jsimport CancelButton from './CancelButton'import SubmitButton from './SubmitButton'export { CancelButton, SubmitButton,}// 在其他文件中可以如此引入import { CancelButton, SubmitButton } from '../Buttons'
