前端react项目组织规范

良好的项目组织能力，能更方便团队之间的开发合作，规避一些开发中可能遇到的问题

这是我从17年接触react以来，就遵循的一套规范，到目前有些许改动，并在百度工作的时候，用这套制定了部门的前端开发规范

目录结构

所有项目的源码都放在根目录src下

• asset // 存放静态文件，以对应容器组件名称命名

• action // 存放页面请求，以对应容器组件名称+Action命名，例如：homeAction

• components // 存放公共组件，遵循Pascal命名法，例如Banner、ProductBanner

• pages // 存放容器组件，遵循小驼峰命名法，例如：home、productPage

• home // 容器目录，和路由保持一直

  • Banner // 页面index私有组件，遵循Pascal命名法

  • index.js // 页面组件，默认index.js命名

  • index.less // 页面样式文件，默认index.less命名

• utils // 公共方法库

• reducers // 存放store，以对应容器组件名称命名

• app.js // 入口文件，路由控制默认放在该文件

图例：

image.png

书写规范

• 项目必须启用eslint

• 普通JavaScript文件以小写字母命名，多个单词以下划线连接，例如utils、utils_wx.js

• 数字型变量，必须带上注释。

• 统一使用四个空格进行缩进，禁止空格与tab混用

• jsx属性均使用单引号

• 类组件的属性、生命周期按照以下书写顺序

  1. static

  2. constructor

  3. componentWillMount

  4. componentDidMount

  5. componentWillReceiveProps

  6. shouldComponentUpdate

  7. componentWillUpdate

  8. componentDidUpdate

  9. componentWillUnmount

  10. 事件处理

  11. render

• hooks只能在函数顶层使用，禁止写在判断语句里