协同开发友好实践

以下内容基于项目实践，抛砖引玉之用

一、目录结构

主要体现在 src 目录下

1. src下的功能目录；
2. 功能目录下的模块目录；
3. 模块目录下的 index READ.md initData.ts components/ComponentA/index.tsx 等；
   image.png

二、文件命名

1. src 下采用全小写，如pages/router/components；
2. 页面或者组件采用 大驼峰/index ，如 pages/Index/index components/Form/index

3. 语义化

   
   image.png

三、模块拆分

一般pages、components目录下的页面或组件都是按功能拆分编写，但其他功能就可能欠缺这种思想。
示例如下， router 以及 types 目录下的文件内容，全部都会经由 index 统一引入然后导出。

image.png

四、代码结构

主要体现是功能分层
一个好的页面Code，不但可以让人看起来舒心，更关键的是能给后面的维护带来极大的方便。
示例如下：

// Install API
import React, { FC, useRef, useState, useEffect } from "react";
import { useDispatch, useSelector } from "umi";
import produce from "immer";

// 公用组件
import { Button, Modal, message, Form, Select } from "antd";
import ProTable, { ProColumns, ActionType } from "@ant-design/pro-table";
import { ExclamationCircleOutlined, LeftOutlined } from "@ant-design/icons";

// 业务组件
import PhoneView from "./PhoneView"; 
import AllotModal from "./AllotModal"; 

// utils--如果觉得有必要，可以统一导出/引入 xxx from "@/utils"
import { exportData } from "@/utils";
import useModalVisible from "@/utils/Hooks/useModalVisible";

// 常量--如果觉得有必要，可以统一导出/引入 xxx from "@/services"
import { API_DELIVERY } from "@/services/request";
import { adminUrl } from "@/services/host";

// 请求--如果觉得有必要，也可以把所有接口统一导出/引入 xxx from "@/services/api"
import { getTaskList } from "@/services/TaskManage";

// types
import { Store } from "antd/es/form/interface";
import {
  TableListItem,
  TaskType,
  TaskTypeEnum,
  OptionsType,
  StatusType,
  KeysType,
  ParamsProps,
  ThirdpartyEnum,
} from "./types";

// 本页面使用types...
interface IProps {}
// 本页面使用的function...
function util(){}
// 本页面声明的常量...
const initData = {}
// 页面/组件内容，如下
const List: FC<IProps> = ({})=>{
    // 初始化数据
  const [state,setState] = useState<string>('')
  const [stateList,setStateList] = useState<{id:number,name:string}[]>([])
  
  // 初始化请求
  useEffect(()=>{
    getList().then((res:any)=>{}).catch((err:any)=>{})
  })
  
  // 依赖更改
  useEffect(()=>{
    // do something
  },[state])
  
  // 注释--根据id获取列表
  const getList = (id:number)=>{
    // 处理注释...
  }
  
  // JSX代码结构
  return (
    {/* 页面主要内容 */}
    
    {/* 弹窗内容 */}

        {/* 其他... */}
  )
}

五、代码量级

1. 页面代码尽量少于500行+；

页面代码功能众多，逻辑复杂，就尽可能拆分成组件组装的方式，把功能/逻辑拆分，这样可以避免代码冗长，方便维护，以及做性能优化；

2. 组件代码尽量少于300行甚至是100行+

拆分出来的功能组件，一般建议少于300行；components目录下的公用组件，一般建议少于100行；

3. 如果组件功能仍然复杂，看情况继续拆分；

4. react推荐函数式编程，所以组件尽量使用函数式，而且无论是函数式组件还是class组件，都应该做性能处理；

最后：语义化和代码注释，是协同开发的重中之重！