Antd Pro 开发规范学习笔记（不断完善）

通过阅读Antd pro 里面的一些源码，发现他们在构建项目时一些常用的小规范，似乎值得我等新人研究研究和模仿模仿，俗话说，无规矩不成方圆，我折磨着得有自己的规范才行，故写下这篇文章。
修改日期：2020-6-11 14:45:16

1. 组件规范index.tsx

1.1 import导入

1.2 接口声明

1.3 函数组件写法

大概写法：

const 组件A: React.FC<组件A的Props接口> = (props) => {
	...
}

在整个组件的写法里面，又可包含以下写法：

1.3.1 一级获取props:

const { P1, P2, dispatch } = props;

1.3.2 二级获取props：

const { p11, p12 } = P1;

1.3.3 异步处理:
这里就好像是class组件React componentDidMount生命周期逻辑。

useEffect(()=>{})

1.3.4 状态声明useState

const [A, setA] = useState(...)

1.3.5 handle类函数:

const handleXXXX = () => {}

1.3.6 组件渲染

1.4 class组件写法

class 组件A extends Component<组件A的Props接口> {}

1.4.1 状态声明

state: 组件AState接口={}

1.4.2 生命周期componentDidMount

componentDidMount() {
	const { dispatch } = this.props;
}

1.4.3 生命周期componentWillUnmount()

componentWillUnmount() {
	const { dispatch } = this.props;
}

1.4.4 handle类函数

handleXXX = () =>{ 
}

1.4.5 其他函数

1.4.6 组件渲染
先获取props

props:const {  A, B } = this.props;

再return

 return(
 	...
 )

1.4.7 connect

export default connect(mapStateToProps)(组件A)

其中，mapStateToProps((connect接口)=>{props映射})

2. model规范model.ts

2.1 import导入
2.2 StateType接口声明

export interface StateType {
 ..
}

2.2 Model接口声明

export interface ModelType {
  namespace: string;
  state: 数据类型接口;
  effects: {};
  reducers: {};
}

2.3 默认state声明

const initState: StateType  = {};

2.4 Model类

const Model: ModelType = {
	namespace:
	state: initState,
	effects: 
	reducers:
}

2.5 export default Model;

3. state数据类型规范：_data.d.ts

export interface A;
export interface B;
export interface C;

4. service规范

4.1 import导入

4.2 暴露方法

export async function xxx() {
  return request(...)
}