react入门(四):组件生命周期

2020-02-13 17:12:17 浏览数 (2)

生命周期

生命周期图例:

组件生命周期相关:(九个生命周期接口)

最初始:

getDefaultProps

getInitialState

Mounting/组件挂载相关: 

componentWillMount componentDidMount

Updating/组件更新相关:

componentWillReceiveProps shouldComponentUpdate componentWillUpdate componentDidUpdate

Unmounting/组件移除相关:

componentWillUnmount 

代码语言:javascript复制
<!DOCTYPE html>
<html>
<body>
<script type="text/jsx">
    var Component1 = React.createClass({
        getDefaultProps: function(){
            console.log('getDefaultProps')
        },
        getInitialState: function(){
            console.log('getInitialState');
            return null
        },
        componentWillMount: function(){
            console.log('componentWillMount')
        },
        componentDidMount: function(){
            console.log('componentDidMount')
        },
        componentWillReceiveProps: function(){
            console.log('componentWillReceiveProps')
        },
        shouldComponentUpdate: function(){
            console.log('shouldComponentUpdate');
            return true;
        },
        componentWillUpdate: function(){
            console.log('componentWillUpdate')
        },
        componentDidUpdate: function(){
            console.log('componentDidUpdate')
        },
        componentWillUnmount: function(){
            console.log('componentWillUnmount')
        },
        render: function() {
            return <div>我只是一个安静的div</div>
        }
    });
    React.render(
            <Component1 />, document.body
    );
    React.render(
            <Component1 />, document.body
    );
    React.unmountComponentAtNode(document.body)
</script>
</body>
</html>

//执行结果为:

0 人点赞