React组件开发规范

React组件规范

---------------------------

# 文件命名

? 每一个文件只包含一个组件 每一个基本组件只包含单一功能 ?

? 如果文件返回是一个类 文件名首字母大写 ?

? 测试用例文件名使用.spec.jsx后缀 ?

? 每一个组件使用一个单独的测试用例文件 ?

# Js规范

? 使用es6 开发 尽量使用常用的ES6 语法 ?

? 使用jsx语法 ?

? 组件文件命名使用大驼峰 ComponentDemo ?

? 带命名空间的组件 如果一个组件包含只有自身使用的子组件 以该组件为命名空间编写组件 例如Table Table.Head ?

? 不使用displayName命名 ?

? 自定义属性使用data- ?

? 使用propTypes进行props类型校验 ?

? 使用defaultProps定义默认参数 ?

? 定义props避开react关键字及保留字 常用的props及state定义可参考下表 ?

? 尽量少或者不使用ref获取和操作dom节点 使用state和prop进行控制dom 如遇必须使用的情况 添加详细注释信息 ?

? 事件调用使用在元素上onClick调用 ?

? 注意 react和html的表单元素的差异 ?

? 不支持mixin 使用decorator进行扩展和高阶组件方式扩展。 ?

? 不能私自添加第三方js库 如需要使用 必须通知本组组长 并在工作群里提出 At所有前端负责人 经讨论后再添加

? 尽量多而有用的代码注释 方法使用块级注释 ?

? 避免使用定时器类的编码 如必须使用 需添加详细注释 各组长合并代码时需要审查是否合理 合确认是否含有销毁方法 ?

? 自身定义的props属性应避免与react的关键字相同 ?

# 样式规范

? 在添加src/style/theme/default.sess中添加公共样式变量 各开发人员尽可能使用里面定义的公共样式变量 ?

? 组件多样式调用 使用classnames模块 进行样式处理 使用className调用 ?

? 所有组件类名命名以‘expo-’开头 ?

# 通用组件接口规范

|参数|说明|类型|默认值|

|:-------|:---------|:-----|:-----|

|size|尺寸string|medium|

|color|颜色|string| |

|shape|形状|string| |

|disabled|是否禁用|bool|false|

|className|增加额外的类名|string| |

|htmlType|html dom 的 type 属性||string| |

|style|内联样式|object| |

# 参考链接

? [airbnb规范](https://github.com/airbnb/javascript/tree/master/react#class-vs-reactcreateclass-vs-stateless) ?

? [代码规范](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/code-style/js.md) ?

本文转自网络，原文链接：https://developer.aliyun.com/article/783938
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！