Summer 的文档

主题

React编码规范 ​

基本规范 ​

  1. 一个文件只写一个组件
    1. 但是假如这个组件是无状态组件，可以写多个在一个文件里
  2. 使用JSX语法
  3. 不使用React.createElement，除非你是在初始化你的app

命名规范 ​

  1. React模块使用.jsx后缀

  2. 组件的文件名，使用帕斯卡命名，实例使用小驼峰

    1. 当文件名由多个单词组合起来的时候，每个单词首字母大写
    2. 文件名不使用**_**下划线的写法

  3. 如果整个文件夹是一个模块，那么使用index.jsx作为入口文件，并且直接使用index.jsx或者文件夹名作为模块的名称，导入不需要精确到index

    vue
    // bad
  import Footer from './Footer/Footer';
  // bad
  import Footer from './Footer/index';
  // good
  import Footer from './Footer';

  4. 避免使用一些内置的属性作为其他用途(props之类的)

  5. 属性分行，最后一行写关闭标签，如果属性只有一个，那么不需要分行

  6. JSX的属性总是使用双引号(**""**)，并且属性使用小驼峰法,当属性值为**true**可以省略

    jsx
    // 多个属性的时候,属性分行写
<Foo
name="name"
age="age"
phoneNumber = {123456789}
/>
// 一个属性可以不用分行写
<Foo name="name" />

  7. jsx引号空格里不要加前后空格

  8. img标签总是需要添加alt属性

  9. 不使用数组的index来作为属性**key**，使用唯一**ID**

目录结构 ​

plain
├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.ts            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

页面代码结构 ​

plain
src
├── components
├── common
└── pages
    ├── Welcome        // 路由组件下不应该再包含其他路由组件，基于这个约定就能清楚的区分路由组件和非路由组件了
    |   ├── components // 对于复杂的页面可以再自己做更深层次的组织，但建议不要超过三层
    |   ├── common     // 共用的utils，map等存放地点
    |   |   ├── utils.js
    |   |   └── pickAStar.js
    |   └── index.less
    |   ├── Form.jsx
    |   ├── index.jsx  // 页面组件的代码
    |   └── index.less // 页面样式
    ├── Order          // 路由组件下不应该再包含其他路由组件，基于这个约定就能清楚的区分路由组件和非路由组件了
    |   ├── index.sx
    |   └── index.less
    ├── user           // 一系列页面推荐通过小写的单一字母做 group 目录
    |   ├── components // group 下公用的组件集合
    |   ├── Login      // group 下的页面 Login
    |   ├── Register   // group 下的页面 Register
    |   └── util.js    // 这里可以有一些共用方法之类，不做推荐和约束，看业务场景自行做组织
    └── *              // 其它页面组件代码
  1. 路由组件：就是你会配置在路由配置中的组件，推荐使用大驼峰法放在pages下面
  2. 不要在路由组件里面嵌套路由组件
  3. 对于多个页面可能会用到的组件我们推荐放到**src/components **
  4. 对于单个页面使用的组件，我们就直接放在路由组件的目录下即可