React---组件的生命周期
一、理解
- 组件从创建到死亡它会经历一些特定的阶段。
- React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
- 我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。
二、 生命周期流程图(旧)
生命周期的三个阶段（旧）
1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
- constructor()
- componentWillMount() // 组件将要挂载
- render()
- componentDidMount() // 组件挂载完毕，初始化操作，开启定时器、发送网络请求、订阅消息
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
- shouldComponentUpdate() // 控制组件更新的“阀门”
- componentWillUpdate() // 组件将要更新
- render()
- componentDidUpdate() // 组件更新完毕
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
- componentWillUnmount() // 常做收尾工作，例如：关闭定时器、取消订阅消息
4. 组件将要接收新的props，componentWillReceiveProps
三、生命周期流程图(新17.0.1版本)
生命周期的三个阶段（新）
1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
- constructor()
- getDerivedStateFromProps
- render()
- componentDidMount()
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
- getDerivedStateFromProps // 若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate // 在更新之前获取快照
- componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
- componentWillUnmount()
四、重要的钩子
- render：初始化渲染或更新渲染调用
- componentDidMount：开启监听, 发送ajax请求
- componentWillUnmount：做一些收尾工作, 如: 清理定时器
- componentWillMount
- componentWillReceiveProps
- componentWillUpdate
五、 即将废弃的勾子
现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。
六、案例
1、新生命周期
1 <script type="text/babel">
2 //创建组件
3 class Count extends React.Component{
4 //构造器
5 constructor(props){
6 console.log('Count---constructor');
7 super(props)
8 //初始化状态
9 this.state = {count:0}
10 }
11
12 //加1按钮的回调
13 add = ()=>{
14 //获取原状态
15 const {count} = this.state
16 //更新状态
17 this.setState({count:count+1})
18 }
19
20 //卸载组件按钮的回调
21 death = ()=>{
22 ReactDOM.unmountComponentAtNode(document.getElementById('test'))
23 }
24
25 //强制更新按钮的回调
26 force = ()=>{
27 this.forceUpdate()
28 }
29
30 //若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
31 static getDerivedStateFromProps(props,state){
32 console.log('getDerivedStateFromProps',props,state);
33 return null
34 }
35
36 //在更新之前获取快照
37 getSnapshotBeforeUpdate(){
38 console.log('getSnapshotBeforeUpdate');
39 return 'atguigu'
40 }
41
42 //组件挂载完毕的钩子
43 componentDidMount(){
44 console.log('Count---componentDidMount');
45 }
46
47 //组件将要卸载的钩子
48 componentWillUnmount(){
49 console.log('Count---componentWillUnmount');
50 }
51
52 //控制组件更新的“阀门”
53 shouldComponentUpdate(){
54 console.log('Count---shouldComponentUpdate');
55 return true
56 }
57
58 //组件更新完毕的钩子
59 componentDidUpdate(preProps,preState,snapshotValue){
60 console.log('Count---componentDidUpdate',preProps,preState,snapshotValue);
61 }
62
63 render(){
64 console.log('Count---render');
65 const {count} = this.state
66 return(
67 <div>
68 <h2>当前求和为：{count}</h2>
69 <button onClick={this.add}>点我+1</button>
70 <button onClick={this.death}>卸载组件</button>
71 <button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
72 </div>
73 )
74 }
75 }
76
77 //渲染组件
78 ReactDOM.render(<Count count={199}/>,document.getElementById('test'))
79 </script>2、旧生命周期
1 <script type="text/babel">
2 //创建组件
3 class Count extends React.Component{
4
5 //构造器
6 constructor(props){
7 console.log('Count---constructor');
8 super(props)
9 //初始化状态
10 this.state = {count:0}
11 }
12
13 //加1按钮的回调
14 add = ()=>{
15 //获取原状态
16 const {count} = this.state
17 //更新状态
18 this.setState({count:count+1})
19 }
20
21 //卸载组件按钮的回调
22 death = ()=>{
23 ReactDOM.unmountComponentAtNode(document.getElementById('test'))
24 }
25
26 //强制更新按钮的回调
27 force = ()=>{
28 this.forceUpdate()
29 }
30
31 //组件将要挂载的钩子
32 componentWillMount(){
33 console.log('Count---componentWillMount');
34 }
35
36 //组件挂载完毕的钩子
37 componentDidMount(){
38 console.log('Count---componentDidMount');
39 }
40
41 //组件将要卸载的钩子
42 componentWillUnmount(){
43 console.log('Count---componentWillUnmount');
44 }
45
46 //控制组件更新的“阀门”
47 shouldComponentUpdate(){
48 console.log('Count---shouldComponentUpdate');
49 return true
50 }
51
52 //组件将要更新的钩子
53 componentWillUpdate(){
54 console.log('Count---componentWillUpdate');
55 }
56
57 //组件更新完毕的钩子
58 componentDidUpdate(){
59 console.log('Count---componentDidUpdate');
60 }
61
62 render(){
63 console.log('Count---render');
64 const {count} = this.state
65 return(
66 <div>
67 <h2>当前求和为：{count}</h2>
68 <button onClick={this.add}>点我+1</button>
69 <button onClick={this.death}>卸载组件</button>
70 <button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
71 </div>
72 )
73 }
74 }
75
76 //父组件A
77 class A extends React.Component{
78 //初始化状态
79 state = {carName:'奔驰'}
80
81 changeCar = ()=>{
82 this.setState({carName:'奥拓'})
83 }
84
85 render(){
86 return(
87 <div>
88 <div>我是A组件</div>
89 <button onClick={this.changeCar}>换车</button>
90 <B carName={this.state.carName}/>
91 </div>
92 )
93 }
94 }
95
96 //子组件B
97 class B extends React.Component{
98 //组件将要接收新的props的钩子
99 componentWillReceiveProps(props){
100 console.log('B---componentWillReceiveProps',props);
101 }
102
103 //控制组件更新的“阀门”
104 shouldComponentUpdate(){
105 console.log('B---shouldComponentUpdate');
106 return true
107 }
108 //组件将要更新的钩子
109 componentWillUpdate(){
110 console.log('B---componentWillUpdate');
111 }
112
113 //组件更新完毕的钩子
114 componentDidUpdate(){
115 console.log('B---componentDidUpdate');
116 }
117
118 render(){
119 console.log('B---render');
120 return(
121 <div>我是B组件，接收到的车是:{this.props.carName}</div>
122 )
123 }
124 }
125
126 //渲染组件
127 ReactDOM.render(<Count/>,document.getElementById('test'))
128 </script>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-04-19 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录