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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

    'use strict'
import React from 'react';
import Nav from '../nav/Nav';
class LifeCycleComponent extends React.Component{
constructor(props){
super(props);
        fpLog('初始化调用:constructor()');
    }
    componentWillMount(){
        fpLog('完成渲前调用:componentWillMount()')
    }
    render(){
        fpLog('渲染时调用:render()');
return(
<div>
<Nav/>
<p>{this.props.text}</p>
<a href="https://facebook.github.io/react/docs/react-component.html" target="_blank">Component Specs and Lifecycle</a>
</div>
        )
    }
    shouldComponentUpdate(nextProps, nextState){
        fpLog('当渲染新的props或state调用:shouldComponentUpdate()');
        fpLog2('<span style="color:blue">原始props.text='+this.props.text+'</span>');
        fpLog2('<span style="color:red">改变后的props.text='+nextProps.text+'</span>');
if(this.props.info!==nextProps.text){
return true
        }
    }
    componentWillUpdate(){
        fpLog('接收到新的props或者state后，进行渲染之前调用:componentWillUpdate()');
    }
    componentDidUpdate(){
        fpLog('完成渲染新的props或者state后调用，此时可以访问到新的DOM元素:componentDidUpdate()');
    }
    componentDidMount(){
        fpLog('真实DOM渲染后调用:componentDidMount()')
    }
    componentWillReceiveProps(nextProps){
        fpLog('组件接收到新的props时调用:componentWillReceiveProps()---'+nextProps.text)
    }
    componentWillUnmount(){
        fpLog('组件销毁前调用：componentWillUnmount()')
    }
}
LifeCycleComponent.dispalyName='LifeCycleComponentDemo';
export default LifeCycleComponent;

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
36
37
38
39

import LifeCycleApp from './LifeCycle';
import React from 'react';
class LifeCycleMainComponent extends React.Component {
constructor() {
super();
this.state = {
info: 'The React Component Lifecycle'
        }
    }
    render() {
return (
<LifeCycleApp text={this.state.info} />
        );
    }
    componentDidMount() {
        //定时更新state的值
        setTimeout(() => {
            this.setState({
                info: 'React组件生命周期'
            })
        }, 2000)
        setTimeout(() => {
            this.setState({
                info: '再次改变state值'
            })
        }, 5000)
    }
    componentWillUnmount() {
    }
}
LifeCycleMainComponent.defaultProps = {
};
export default LifeCycleMainComponent;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

- 初始化调用:constructor()
- 完成渲前调用:componentWillMount()
- 渲染时调用:render()
- 真实DOM渲染后调用:componentDidMount()
- 组件接收到新的props时调用:componentWillReceiveProps()---React组件生命周期
- 当渲染新的props或state调用:shouldComponentUpdate()
>>> 原始props.text=The React Component Lifecycle
>>> 改变后的props.text=React组件生命周期
- 接收到新的props或者state后，进行渲染之前调用:componentWillUpdate()
- 渲染时调用:render()
- 完成渲染新的props或者state后调用，此时可以访问到新的DOM元素:componentDidUpdate()
- 组件接收到新的props时调用:componentWillReceiveProps()---再次改变state值
- 当渲染新的props或state调用:shouldComponentUpdate()
原始props.text=React组件生命周期
改变后的props.text=再次改变state值
- 接收到新的props或者state后，进行渲染之前调用:componentWillUpdate()
- 渲染时调用:render()
- 完成渲染新的props或者state后调用，此时可以访问到新的DOM元素:componentDidUpdate()