#yyds干货盘点 【React工作记录三十六】react开发规范参考

简介: #yyds干货盘点 【React工作记录三十六】react开发规范参考

导语

歌谣 歌谣 react的代码开发规范是什么 这里只做参考




编辑


规范部分

#### 开发规范


```


1,编辑器尽量用 VSCode,然后装 Prettier 插件 简单的代码规范


2,缩进2个空格,如果是tab 也设置成2个空格


3,命名时尽量用英文,文件名,组件名等,单词多的可以大写简写。


4,函数名字尽量以 handle开头,如 handleSubmit = () =>{}


5,写代码时尽量以小函数为主,大的函数抽取一下。逻辑复杂的可以再当前文件夹下再建一个文件 service文件,处理逻辑。


6,代码尽量写注释,每个函数尽量写行   如:


   // 表单提交


   handleSubmit = () =>{}


7,如果写了很复杂的逻辑  或者层次较深的业务,尽量在当前文件下下写个Readme文件,类似下单之类的业务。


8,封装公共组件  写好参数 及该组件的用途,不在组件中写固定的逻辑,都以 props 传递过来的数据,组件封装尽量写 typescript,做好props类型约束。


9,封装公共方法时也是类似,无论是写了公共组件或者公共方法 尽量在群里说一声  特别是类似 TaroUI listItem 那种布局的 左右或者上下的 一般大家都会用  写好之后在群里说一下。


10,如果修改了公共的东西 一定要说,修改谁写的组件或者方法尽量先沟通下。


11,页面代码行数不超过尽量不超过 100 行。


12,非公用组件,费公用代码逻辑辅助方法,封装抽取时,写到当前模块或者文件夹下。


13,pages 目录书写规范:以system 模块为例


14,services 里面的方法,method 必须大写 例如:`"GET" "POST" "PUT" "DELETE"`




System


├── components        当前模块抽取公用组件


├── models            当前模块的数据


├── Employee          员工管理


     ├── components  当前页面抽取封装组件


     ├── data.js     页面辅助方法或配置(可选)


     ├── index.js    页面逻辑


     ├── index.less  样式  


14,services 文件夹按照模块划分,每个接口写好 url注释。


15,models 文件也一样都按照模块划分,方法都和初始化 state 尽量都写注释。


16,引入依赖包时,需共同商议决定,不要直接引入。


17,utils里面定义公共方法或者公共资源时,请确定是否是通用的。如果不是请在当前页面文件夹下做。公共文件会被打成 verdors.js,会在首页初始化时加载。


```




总结

规范是时间久慢慢锻炼出来的 还是多练吧



相关文章
|
4天前
|
缓存 前端开发 JavaScript
React 参考手册
10月更文挑战第13天
13 0
|
3月前
|
前端开发
React官网 - 井字棋 - 游戏改进参考答案(含汉化和完整范例代码)
React官网 - 井字棋 - 游戏改进参考答案(含汉化和完整范例代码)
42 1
|
前端开发 JavaScript
react开发规范参考
react开发规范参考
196 0
|
前端开发 JavaScript
【React工作记录三十六】react开发规范参考
【React工作记录三十六】react开发规范参考
215 0
|
前端开发 JavaScript
#yyds干货盘点# 【React工作记录三十六】react开发规范参考
#yyds干货盘点# 【React工作记录三十六】react开发规范参考
152 0
#yyds干货盘点# 【React工作记录三十六】react开发规范参考
|
5月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
337 0
|
5月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
69 0
|
5月前
|
前端开发
【第31期】一文学会用React Hooks组件编写组件
【第31期】一文学会用React Hooks组件编写组件
70 0
|
5月前
|
存储 前端开发 JavaScript
【第29期】一文学会用React类组件编写组件
【第29期】一文学会用React类组件编写组件
71 0
|
5月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
112 0