diff --git a/react编码规范.md b/react编码规范.md index 5c06148..cee3ed6 100644 --- a/react编码规范.md +++ b/react编码规范.md @@ -1,23 +1,49 @@ # react组件开发规范 -## 语言要求 + +## 文件命名 +- 每一个文件只包含一个组件,每一个基本组件只包含单一功能 +- src目录下,如果文件返回是一个类,文件名首字母大写 +- 文件js模块统一使用js后缀名 +- 测试用例文件名使用.spec.js后缀 +- 每一个组件使用一个单独的测试用例文件 + +## js规范 - 使用es6开发 - 使用jsx语法 - 组件命名使用大驼峰, ComponentDemo - 带命名空间的组件,如果一个组件包含只有自身使用的子组件,以该组件为命名空间编写组件,例如Table,Table.Head - 不使用displayName命名 -- 每一个文件只包含一个组件,每一个基本组件只包含单一功能 -- 使用js为扩展名 -- 组件样式调用,使用classnames模块,进行样式处理,使用className调用 - 自定义属性使用data- - 使用propTypes进行props类型校验 - 使用defaultProps定义默认参数 -- 使用getInitialState初始化状态对象 - 尽量少或者不使用ref获取和操作dom节点,使用state和prop进行控制dom - 事件调用使用在元素上onClick调用 - 注意,react和html的表单元素的差异 - 使用es6后,不支持mixin,使用decorator进行扩展,(babel?需要增加解析器)和高阶组件方式扩展。 +- 尽量不使用比较大的第三方js库 + + - 代码规范使用 [airbnb规范](https://github.com/airbnb/javascript/tree/master/react) +## 样式规范 +- 组件样式调用,使用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); + +``` + + ## 基本代码结构 ```javascript @@ -59,3 +85,7 @@ Button.defaultProps = defaultProps; module.exports = Button; ``` + + +参考链接 +https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/code-style/js.md