代码风格
- 文本换行方式使用 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 足以满足绝大部分需求