react-components-docs/react编码规范.md

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规范

样式规范

• 组件样式使用sass编写，公用样式使用tinper-bee-core包，请阅读tinper-bee-core文档
• 组件样式调用，使用classnames模块，进行样式处理，使用className调用
• 组件内部使用clsPrefix为样式前缀

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

基本代码结构

//引入依赖
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