生命周期的三个阶段(旧)
1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
4. 组件将要接收新的props,componentWillReceiveProps
生命周期的三个阶段(新)
1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
现在使用会出现警告,下一个大版本需要加上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>