React 代码规范

2020-12-16

代码风格

  • 文本换行方式使用 LF
  • 代码缩进使用两个空格,不使用 Tab
  • 所有文件最后留一行空行
  • 使用单引号,需要拼接字符串时使用反引号
  • 行尾加分号
  • 对象数组等加逗号,包括最后一行

文件及变量命名

  • 组件文件名与组件名保持一致,采用帕斯卡命名法
  • 或文件夹名与组件名保持一致,文件名为 index.(jsx|tsx)
  • 一个文件仅包含一个组件
  • JavaScript 变量采用驼峰命名法
  • CSS 的 className 采用 BEM 命名规则
  • 如果使用 CSS Modules,在 JSX 中 className 使用驼峰命名规则(因为本质上还是 JavaScript 变量)
  • 某个组件的 CSS 文件,名称与 JSX 文件名保持一致

Class 组件

Class 组件内的内容应按照一下顺序排列:

  • static propTypes
  • static defaultProps
  • static getDerivedStateFromProps
  • static getDerivedStateFromError
  • 其他 static 方法
  • constructor
  • _ 开头的私有方法(假装私有)或 tsx 中的 private 方法
  • ~~componentWillMount / UNSAFE_componentWillMount~~ (不建议使用)
  • componentDidMount
  • ~~componentWillReceiveProps / UNSAFE_componentWillReceiveProps~~ (不建议使用)
  • shouldComponentUpdate
  • ~~componentWillUpdate / UNSAFE_componentWillUpdate~~ (不建议使用)
  • componentDidUpdate
  • componentWillUnmount
  • componentDidCatch
  • handle 开头的事件处理方法,如 handleBtnClick
  • on 开头的事件处理方法,如 onFormSubmit,建议用 handle
  • 用于 render 的 getter 方法,如 getTotalPrice
  • render 开头的方法,如 renderNavbar
  • render

定义方法时使用箭头函数,避免在 JSX 或构造函数中使用 .bind(this)

建议将事件监听的方法都以 handle 开头命名,将事件监听方法传给组件时属性名以 on 开头,如:

<NumberInpput onChange={handleNumberChange} />

如无特殊情况,建议使用函数式组件 + Hooks

JSX

  • props 属性名采用驼峰命名法
  • prop 值为 true 时,省略值,如 <Input disabled />
  • prop 值使用双引号,如 <Button type="primary">Primary Button</Button>
  • 有多个 prop 时,每个 prop 独占一行,>/> 也独占一行
  • 没有子元素时使用自闭合标签,自闭合标签前留一个空格
  • 优先使用 React.Fragment 而不是无意义的标签

状态管理

  • 始终坚持单向数据流和单一数据源的原则
  • 状态不要通过 props 多层传递,如需经过多层传递,建议使用 Context 或状态管理库

Hooks

  • 严格遵守 eslint-plugin-react-hooks 中的规则
  • 代码以业务逻辑划分区块,而不是以 Hooks 种类划分

样式

  • 不建议使用行内样式
  • 不建议直接在 JSX 文件中导入 CSS 文件
  • 建议使用 CSS Modules 或 CSS in JS 方案

更多可参考 在 React 中使用 CSS

其他

  • 建议使用路由懒加载,React.lazy(() => import('./pages/User')),如需 SSR,建议使用 @loadable/component
  • 大部分业务场景都不需要第三方状态管理库,Context 足以满足绝大部分需求