react组件的生命周期--初始化阶段

责编:menVScode 2017-06-18 16:46 阅读(799)

        生命周期:组件本质是状态机,一个state对应一个render,状态转换的时候会触发不同的函数。

        现在先开始介绍react组件生命周期的初始化阶段,直接看代码来分析。

var Demo = React.createClass({
    // 第1步执行:设置初始的属性,组件加载的时候只执行一次
    getDefaultProps:function(){
        return {
            name:'1111',
            title:'MVCsss'
        }
    },
    // 第2步执行:设置初始的状态(状态机)
    getInitialState:function(){
        return {
            con:this.props.title
        }
    },
    // 第3步执行:组件将要加载的时候,最后一次可以修改状态的机会
    componentWillMount:function(){
        this.setState({
            con:'状态最后一次可以修改了'
        });
    },
    // 第4步:render渲染
    render:function(){
        console.log(this)
        var style = {width:'150px',height:'150px',background:'yellow',position:'relative'}
        return <div ref='box' style={style}>{this.state.con}{this.props.name}</div>
    },
    // 第五步:组件加载完成,只有在这一个阶段,才可以操作DOM节点
    componentDidMount:function(){
        var box = this.refs.box;
        var time = null;
        var n = 0;
        box.onclick = function(){
            var _this = this;
            setInterval(function(){
                n++;
                _this.style.top = n+'px'; 
            },500)
        }
    }
});
ReactDOM.render(<Demo />,document.getElementById("app"))

        getDefaultProps设置初始的属性,组件加载的时候只执行一次;(第一步)

        getInitialState设置初始的状态(状态机);(第二步)

        componentWillMount组件将要加载的时候,最后一次可以修改状态的机会;(第三步)

        renderrender渲染,只能访问this.props与this.state,只有一个顶层标签(组件),不允许修改状态和DOM输出,这个时候只是虚拟节点的创建;(第四步)

        注意:前面的4步,没有真正的把组件渲染出来,render()只是把虚拟节点构建出来;

        componentDidMount:成功render并渲染完成真实DOM之后触发(组件加载完成),只有在这一个阶段,才可以操作DOM节点(第五步)

        来看看第4步中console.log(this)的结果,包含哪些内容:

QQ截图20170618163742

        从上面的图片可以看到,设置默认属性getDefaultProps时传入的属性;非dom属性refs是什么,其中box下还包含了许多原生的属性和方法开操作节点;在原型链上能看到react组件的生命周期--初始化阶段所涉及到的函数。

前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码