react开发规范

目的：为提高团队协作效率, 便于后期优化维护, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.

1. table缩进必须为4个空格
2. 方法命名必须语义化，必须使用驼峰写法 ```javascript // good getTreeListData(){}

// bad gettree(){}

3. 列表循环中禁止用index 作为key 值, 可以使用内容作为key 值
```javascript
// good
list.map(item => (
    <li key={item.key}>{item.name}</li>
))
// bad
list.map((item, index) => (
    <li key={index}>{item.name}</li>
))

1. 任何代码中都禁止出现 
2. 代码中禁止出现魔鬼数字，需要用到类型的请使用语义化英文 ```javascript // good state = { type: ‘firstItem’, }

// bad state = { type: 1, }

6. 对象必须解构
```javascript
// good 
const { visible } = this.state;
<Modal visible={visible} />
// bad
<Modal visible={this.state.visible} />

1. 使用componentWillReceiveProps（官方已经标记为不安全）时必须加判断 ```javascript // good componentWillReceiveProps(nextProps) { if (this.props.name !== nextProps.name){ if (nextProps.name){ const { name } = nextProps; this.setState({

    name

   }) } } }

// bad componentWillReceiveProps(nextProps) { const { name } = nextProps; this.setState({ name }) }

8. models 目录，pages 目录及services 目录命名规范
```javascript
|—— src
     |—— models
                 |—— message.js    //和services 中对应的文件命名一致
     |—— pages
                 |—— Message    //组件目录（首字母必须大写）
                      |—— index.js    //组件入口文件（名称必须为index.js）
                                |—— index.less    //一个组件当中 一个index.less 足够用了
     |—— services
                 |—— message.js  //和models 中对应的文件命名一致
 // models/menu.js
export default {
    namespace: 'message',    // 和services 及 models 中的文件命名一致
}
// 1. services 目录下的文件名称和models 目录下的文件名称及model 文件内的命名空间要一致
// 2. pages 目录下的文件夹首字母必须大写
// 3. pages 目录下的组件目录内部要有一个index.js（名称必须为index.js）作为该组件的入口文件

1. services 名称和model 及API 的名称要一致

   // components
   dispatch({
   type: 'exam/fetchSortMoveNode',
   });
   // models
   *fetchSortMoveNode({ payload, callback }, { call, put }) {
   const response = yield call(sortMoveNode, payload);
   }
   // services
   export async function sortMoveNode() {
   return request('/api/quality/Exam/sortMoveNode');
   }

2. 在三元表达式里面不要使用括号 ```javascript // good {isParent ? 编辑 : this.onOpen(record, ‘edit’)}>编辑 }

// bad {isParent ? (编辑) : ( this.onOpen(record, ‘edit’)}>编辑) } ```

1. 所有空数据都要使用Empty 组件
2. 所有树节点的增改弹层都是用Modal（对话框）组件 ，所有的表格增改查弹层都是用Drawer（抽屉）组件
3. Form 组件布局
   

   • 在Modal 中的Form 布局使用horizontal ，一行一个FormItem
   • 在Drawer 中的Form 布局使用 vertical ，一行两个FormItem
   • 在表格上方如高级搜索中的Form 布局使用 inline