良好的项目组织能力,能更方便团队之间的开发合作,规避一些开发中可能遇到的问题
这是我从17年接触react以来,就遵循的一套规范,到目前有些许改动,并在百度工作的时候,用这套制定了部门的前端开发规范
目录结构
所有项目的源码都放在根目录src下
asset // 存放静态文件,以对应容器组件名称命名
action // 存放页面请求,以对应容器组件名称+Action命名,例如:homeAction
components // 存放公共组件,遵循Pascal命名法,例如Banner、ProductBanner
containers// 存放容器组件,遵循小驼峰命名法,例如:home、productPage
-
home // 容器目录,和路由保持一直
Banner // 页面index私有组件,遵循Pascal命名法
index.js // 页面组件,默认index.js命名
index.less // 页面样式文件,默认index.less命名
utils // 公共方法库
reducers // 存放store,以对应容器组件名称命名
app.js // 入口文件,路由控制默认放在该文件
图例:
书写规范
项目必须启用eslint
普通JavaScript文件以小写字母命名,多个单词以下划线连接,例如utils、utils_wx.js
数字型变量,必须带上注释。
统一使用四个空格进行缩进,禁止空格与tab混用
jsx属性均使用单引号
-
类组件的属性、生命周期按照以下书写顺序
static
constructor
componentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount
事件处理
render
hooks只能在函数顶层使用,禁止写在判断语句里