Antd Pro 開發規範學習筆記（不斷完善）

通過閱讀Antd pro 裏面的一些源碼，發現他們在構建項目時一些常用的小規範，似乎值得我等新人研究研究和模仿模仿，俗話說，無規矩不成方圓，我折磨着得有自己的規範纔行，故寫下這篇文章。
修改日期：2020年6月6日10:49:38

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 Model接口聲明

export interface ModelType {
  namespace: string;
  state: 數據類型接口;
  effects: {};
  reducers: {};
}

2.3 默認state聲明

const initState = {};

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(...)
}