【学】React的学习之旅2 - React Component的生命周期

分成三个状态：

• Mounted
• Update
• Unmounted

Mounted:当我们看到组件在浏览器中从无到有的效果的时候，mounted已经结束了,这个组件已经被mounted了

有这个阶段有2个hook函数：

• componentWillMount:组件将要被mount之前调用
• componentDidMount:组件被mount之后调用

还有一个函数，是初始化组件的state，getInitialState()

Update:并不是说相应的DOM结构一定会发生改变，React会把当前这个组件的当前的state和之前最近一次的state进行对比，只有当state确实发生了改变并且影响了DOM结构的时候,React才会去改变对应的结构。

Unmounted:一般用得少，得益于浏览器的垃圾回收机制。

this.state可以拿到组件的样式

下面这段是可以用来初始化组件的样式

var Hello = React.createClass({
    //把return的样式设置成初始样式
    getInitialState:function(){
        return {
            color: 'red',
            fontSize:'40px'
        }
    },
    render:function (){  //this.state可以拿到组件的样式，state是个json对象，在这里初始化的时候就是用了getInitialState中返回的样式对象直接赋值给当前这个组件中h2的样式，也可以取state的键值，比如写成style={{color:this.state.color}}
        return (<h2 style={this.state}>Hello {this.props.name}</h2>);
    }
});
ReactDOM.render(
        <Hello title="Ms" name="World"/>,
        document.getElementById('wrap')
);

Props和state的区别：

一般是组件调用方在调用组件时用的，Props一旦指定了一般是不会变化的。对于被调用的组件来说，Props的拥有者是其调用方，在DOM结构上一般是父级，而state可以认为是私属于当前组件的，它的值是可以变化的。

修改state的值——调用component的setState()方法

写在componentDidMount的函数里，表示在mounte之后组件发生的变化，将要变化的属性和值放入一个对象中，再传入到setState()的参数里。

下面这个例子是演示在一秒钟后改变组件的样式

var Hello = React.createClass({
    getInitialState:function(){
        return {
            color: 'red',
            fontSize:'40px'
        }
    },
    render:function (){
        return (<h2 style={this.state}>Hello {this.props.name}</h2>);
    },
//这里再说一次为什么要存this为that。定时器方法本事要传一个函数到参数里，这时这个函数作为局部变量，不属于任何对象，那里面的this就是指global对象，在浏览器中就是window。而componentDidMount里的this，指的是当前Hello组件的一个实例，这里的期望是想设置某个组件实例的state，所以要用that存一下再进入定时器，当然也可以不存，直接在定时器参数function最后.bind(this)一下，bind和call以及apply中的第一个参数是指定运行当前函数的调用者，而在setTimeout中参数的this，只是局部变量，还没有进到function中去，所以是指向组件实例。
    componentDidMount: function(){
        var that = this;
        setInterval(function(){
            that.setState({
                color:`deeppink`,
                fontSize:'100px'
            });
        },1000);
    }
});

或者写成:

componentDidMount: function(){
    setInterval(function(){
        this.setState({
            color:`deeppink`,
            fontSize:'100px'
        });
    }.call(this),1000); //这里可以用call,apply或者bind
}

我们发现state的值的变化，都会导致组件的当前状态变成updating状态，从而重新render(),我们并没有显式地修改组件的样式，但是state的值变了之后，它的样式就跟着变了。