我最初使用 React 的时候喜欢用完整的名字来命名文件，但是这样会导致相同的部分重复太多次，同时引入时的路径太长。来看看这两种方式的区别：import ScreensUserForm from './screens/User/UserForm';// vsimport ScreensUserForm from './screens/User/Form';
在上面的例子中，我们看不出来明显的优势。但是应用复杂度上升一点时就能够看到区别了。我们来看看下面这个我实际项目中的例子：import MediaPlanViewChannel from '/MediaPlan/MediaPlanView/MediaPlanViewChannel.jsx';// vsimport MediaPlanViewChannel from './MediaPlan/View/Channel';
现在想象一下一个文件名中重复五到十次。
出于这样的原因，我们认为根据组件文件的上下文环境以及它的相对路径来命名是更好的方式。 页面（Screen）
如果要对一个用户做增删改查的操作，我们需要有用户列表页面，创建新用户的页面以及编辑已有用户的页面。
在应用中，通过使用组件相互组合的结果，就是一个页面。理想状态下，页面应该不包含任何逻辑，而仅仅是一个函数式组件。
我们以 src 目录为根目录，将不同页面分散在不同文件夹中。因为它们是根据路由定义而不是模块来划分成组的。src├─ components └─ screens └─ User ├─ Form.jsx └─ List.jsx
假设我们项目中在使用 react-router，我们在 screens 目录下放置 Root.jsx 文件，并且在其中定义我们应用所有的路由。
Root.jsx 的代码可能像下面这样：import React, { Component } from 'react';import { Router } from 'react-router';import { Redirect, Route, Switch } from 'react-router-dom'; import ScreensUserForm from './User/Form';import ScreensUserList from './User/List'; const ScreensRoot = () => ( <Router> <Switch> <Route path="/user/list" component={ScreensUserList} /> <Route path="/user/create" component={ScreensUserForm} /> <Route path="/user/:id" component={ScreensUserForm} /> </Switch> </Router>); export default ScreensRoot;
