105 lines
2.9 KiB
Markdown
105 lines
2.9 KiB
Markdown
# react组件开发规范
|
||
|
||
## 文件命名
|
||
- 每一个文件只包含一个组件，每一个基本组件只包含单一功能
|
||
- src目录下，如果文件返回是一个类，文件名首字母大写
|
||
- 文件js模块统一使用js后缀名
|
||
- 测试用例文件名使用.spec.js后缀
|
||
- 每一个组件使用一个单独的测试用例文件
|
||
|
||
## js规范
|
||
- 使用es6开发
|
||
- 使用jsx语法
|
||
- 组件命名使用大驼峰， ComponentDemo
|
||
- 带命名空间的组件，如果一个组件包含只有自身使用的子组件，以该组件为命名空间编写组件，例如Table，Table.Head
|
||
- 不使用displayName命名
|
||
- 自定义属性使用data-
|
||
- 使用propTypes进行props类型校验
|
||
- 使用defaultProps定义默认参数
|
||
- 尽量少或者不使用ref获取和操作dom节点，使用state和prop进行控制dom
|
||
- 事件调用使用在元素上onClick调用
|
||
- 注意，react和html的表单元素的差异
|
||
- 使用es6后，不支持mixin，使用decorator进行扩展，（babel？需要增加解析器）和高阶组件方式扩展。
|
||
- 尽量不使用比较大的第三方js库
|
||
|
||
|
||
- 代码规范使用 [airbnb规范](https://github.com/airbnb/javascript/tree/master/react)
|
||
|
||
## 样式规范
|
||
- 组件样式使用sass编写，公用样式使用tinper-bee-core包，请阅读[tinper-bee-core文档](https://github.com/tinper-bee/tinper-bee-core)
|
||
- 组件样式调用，使用classnames模块，进行样式处理，使用className调用
|
||
- 组件内部使用clsPrefix为样式前缀
|
||
```javascript
|
||
const clsPrefix = 'u-select';
|
||
const class1 = {
|
||
[`${clsPrefix}-item`]: true,
|
||
[`${clsPrefix}-item-last`]: stepLast,
|
||
[`${clsPrefix}-status-${status}`]: true,
|
||
[`${clsPrefix}-custom`]: icon,
|
||
[className]: !!className,
|
||
};
|
||
const class2 = [`${clsPrefix}-submit`, `${clsPrefix}-item`];
|
||
|
||
const classString = classNames('hide', class1, class2);
|
||
|
||
```
|
||
## 组件接口规范
|
||
|
||
|参数|说明|类型|默认值|
|
||
|---|----|---|------|
|
||
|size|尺寸|string|medium|
|
||
|color|颜色|string|''|
|
||
|shape|形状|string|''|
|
||
|disabled|是否禁用(`disabled` 或 `true` `false`)|bool|false|
|
||
|className|增加额外的类名|string|''|
|
||
|htmlType|html dom 的 type 属性|string|''|
|
||
|style|内联样式|object|''|
|
||
|loadingText|loading时显示内容,默认值loading|string|loading|
|
||
|loadingTime|loading的时间|number|300ms|
|
||
|
||
## 基本代码结构
|
||
|
||
```javascript
|
||
//引入依赖
|
||
import React from 'react';
|
||
import ReactDOM from'react-dom';
|
||
import classnames from 'classnames';
|
||
|
||
//定义prop检验
|
||
const propTypes = {
|
||
|
||
}
|
||
|
||
//定义默认参数
|
||
const defaultProps = {
|
||
|
||
}
|
||
|
||
//定义组件
|
||
class Button extends React.Component {
|
||
constructor (props) {
|
||
super(props);
|
||
//定义state
|
||
this.state = {
|
||
|
||
}
|
||
}
|
||
//自定义内容
|
||
|
||
render () {
|
||
return (
|
||
|
||
)
|
||
}
|
||
}
|
||
|
||
Button.propTypes = propTypes;
|
||
Button.defaultProps = defaultProps;
|
||
|
||
export default Button;
|
||
```
|
||
|
||
|
||
参考链接
|
||
https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/code-style/js.md
|