React编码规范

项目文件结构

按文件类型组织

按照boa-cli脚手架组织文件即可。其它项目文件结构可以参考React项目文件结构

命名规则

基本规则：

1. 使用大小写英文字母和下划线、中划线组成
2. 不能使用关键字和保留字
3. 能见名知意

类型	命名规则	举例
项目名	英文小写，分隔符用中划线	kcs、komp-web
文件夹名	小驼峰命名法	account、devLicense
文件名	小驼峰命名法，后缀要能体现文件的类型	userDetail.tsx、config.ts、global.scss
图片名	英文小写，分隔符用中划线，带精度	login-bg@2x.png
组件名	大驼峰命名法	ProductConf
常量名	英文大写，分割符用下划线	PRODUCT_INFO
变量名	小驼峰命名法，布尔类型用is/has开头	userInfo、isInstall
方法名	小驼峰命名法	getUserInfo
组件属性名	小驼峰命名法	activeKey
样式类名	英文小写，分隔符用中划线	modal-btn

函数编码规则

1. 写主要注释

/** 
 * @description 计算两数之和 
 * @param a {string | number} 第一个加数 
 * @param b {?string | number | undefined} 第二个加数 
 * @returns {number} 两数之和 
 */ 
function add(a: string | number, b = 1) { 
  return Number(a) + Number(b) 
}

2. 一个函数就干一件事，行数最好不超过50行
3. 超过1个地方的重复逻辑则封装成函数，超过2个地方使用的函数则抽成工具函数
4. 函数与函数之间用一个空行隔开

组件编码规则

注意：因为我们部门使用函数式组件，所以下面不涉及类组件的编码规范

写主要注释

/** 
 * @description 组件用途 
 * @author 作者
 */ 

文件编写规则

1. 先创建一个文件夹userManager(举个例子)
2. 然后在userManager下创建文件index.tsx和index.css(如果用的是less或者scss，则改成对应的后缀)
3. 在index.tsx中可以存在多个不同的组件，但仅允许通过export default暴露一个组件，其它组件均定义为内部组件，且暴露的组件名应该和文件夹同名为UserManager(需要注意的是文件夹是小驼峰命名，组件名是大驼峰命名)

如下图所示：

文件导入顺序

1. 与react相关的第三方包
   比如react、react-redux、react-router (按照包使用的先后顺序排序)
2. 其他第三方包
3. 组件库
   (1). chopperui-react
   (2). @kingdee-ui/kd-ui ==> @kdcloudjs/kdesign
   (3). 自定义组件
        ①. 公共组件    
        ②. 非公共组件
4. 常量
   (1). 全局常量
   (2). 局部常量
5. 方法
   (1). 工具方法
   (2). 其他文件中的方法
6. api
7. store
8. 图片
9. 样式

PS: 同类型的资源按照在文件中出现的先后顺序排序

常用文件夹建议在webpack中配置别名。如下：

alias: { 
    'src': path.join(__dirname, '../src'), 
    'components': path.join(__dirname, '../src/components'), 
    'utils': path.join(__dirname, '../src/utils') 
}

编码顺序

1、解构`props`(如果有)
2. react相关的第三方包中的钩子函数(除了useEffect)
3. 方法(跟api有关的方法放最后)
4. 内部组件
5. useEffect
   (1). 无依赖
   (2). 有依赖(按照调用的先后顺序排序)
   (3). 返回值是函数

jsx编码规则

1. 创建虚拟DOM请使用jsx语法，不要使用React.createELement
2. 没有子节点的组件，使用自闭合语法

<ConfirmModal />

3. 组件有多个属性时

   (1).每个属性各占一行

   (2).属性值用双引号，其他均使用单引号

   (3).属性值如果是常量字符串，使用字面量赋值title="标题1"，而不是title={'标题1'}

   (4).属性值如果是true，则省略属性值

   (5).属性在前，方法在后

   (6).闭标签另起一行

   如下代码所示：

<ConfirmModal 
  visible
  title="标题1"
  text="我是body正文"
  style={{ color: '#ccc' }}
  onCancel={() => handleModalCancel()}
/>

4. 组件的key要用有意义的变量标识，不要用数组下标之类的标识

react-hooks编码规则

1. 只在在顶层使用Hooks(不要在循环、条件或嵌套函数中使用hook)
2. 只在React函数中调用Hook(不要在普通的JavaScript函数中调用hook)