React组件开发规范-阿里云开发者社区

开发者社区> 阿里云GTS能力中心-浩鲸智能> 正文
登录阅读全文

React组件开发规范

简介: 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尺寸stringmedium
color颜色string''
shape形状string''
disabled是否禁用boolfalse
className增加额外的类名string''
htmlTypehtml dom 的 type 属性stringstring
style内联样式objectobject

参考链接

airbnb规范

代码规范

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:

阿里云GTS能力中心(浩鲸智能),从交付的视角探讨数字化转型过程中大型软件开发实践、以及阿里云产品在各行业被集成的案例分享、技术沉淀等内容。敬请关注!

官方博客
官网链接