react入门（四）：组件生命周期

柴小智

发布于 2020-02-13 17:12:17

3550

发布于 2020-02-13 17:12:17

文章被收录于专栏：菜鸟计划菜鸟计划

生命周期

生命周期图例：

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

最初始:

getDefaultProps

getInitialState

Mounting/组件挂载相关:

componentWillMount componentDidMount

Updating/组件更新相关:

componentWillReceiveProps shouldComponentUpdate componentWillUpdate componentDidUpdate

Unmounting/组件移除相关:

componentWillUnmount

<!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>

//执行结果为：

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-01-13 ，如有侵权请联系 cloudcommunity@tencent.com 删除

updating