# 生命周期
react 提供了一个完善的生命周期机制,而在日常业务开发中,我们往往可以借助如 componentDidMount
(组件挂载) 进行如 “数据拉取”, componentWillUnmount
(组件卸载) 进行如事件销毁等操作。
目前 AMS 也提供致敬 react 2个生命周期:
componentDidMount componentWillUnmount
最佳实践:请尽可能在页面顶层使用生命周期进行如异步请求的操作, 这将有利于组件状态之间的管理
# 组件挂载/组件卸载
在组件初始化完并渲染到页面时,componentDidMount 将被执行。以下为基本用法:
class Card extends React.Component {
componentDidMount() {
// ...
}
componentWillUnmount() {
// ...
}
render() {
// ...
}
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
{
"$$$": "component",
"registryName": "antd",
"componentName": "Card",
"lifecycle": {
"componentDidMount": {
// ...
},
"componentWillUnmount": {
// ...
}
},
"props": {
// ...
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
实战用例: 在组件加载时获取用户信息,在组件卸载时加入埋点统计。
{
"$$$": "component",
"registryName": "html",
"componentName": "div",
"lifecycle": {
"componentDidMount": {
"$$$": "function",
"registryName": "base",
"componentName": "ajax",
"args": [
{
"url": "//xxx.com/api/get-user-info-by-id",
"method": "get",
"params": {
"userId": "aa6d7719-1914-4ad0-96a0-5b500ad6426c"
}
}
]
},
"componentWillUnmount": {
"$$$": "function",
"registryName": "base",
"componentName": "ajax",
"args": [
{
"url": "//xxx.com/api/track",
"method": "get"
}
]
}
},
"props": {
// ...
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35