基础规范

随着 React Hook 的出现，社区的各个库也开始积极拥抱 Hook；项目采用React Hook方式进行开发。

项目结构

编码规范

1. 基础规范

每个文件只包含一个 React 组件
采用 jsx 语法

2. 命名规范

单独文件组件，使用大驼峰的方式命名 NavBar.tsx
目录组件，目录命名使用大驼峰方式

tsx

/NavBar
|- index.tsx
|- index.less

3. 引号

JSX 属性使用单引号，与普通 JS 保持一致

推荐：

tsx

<Card style={{ width: '100%' }} />

4. 属性

所有属性命名使用小驼峰方式

5. 圆括号

JSX 标签超过一行，请使用圆括号包裹

tsx

function UserDetail(props) {
  return (
    <ParentComponent>
      <ChildComponent />
    </ParentComponent>
  )
}

6. 标签

没有子元素的标签请闭合

React Hooks 项目规范

统一使用函数组件
组件内部的状态统一使用 hooks 处理，业务数据统一放在 redux 中管理
请求和数据处理统一放置 actions
容器组件都有自己独立的 reducer
Hooks 的方法统一放在最前面