Herring Cove
react入门 （3）-组件的生命周期

  03 Jan 2016

组件的生命周期

组件的生命周期分成三个状态：

Mounting: 已插入真实DOM
Updating: 正在被重新渲染
Unmounting:已移出真实DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用， did 函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps,object nextState)
componentDidupdate(object nextProps,object nextState)
componentWillUnmount()

此外 React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps) //已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)//组件判断是否重新渲染时调用

下面是一个例子

var Hello=React.createClass({
            getInitialState:function () {
                return {opacity:1.0}
            },
            componentDidMount:function () {
                this.timer=setInterval(function () {
                    var opacity=this.state.opacity;
                    opacity-=0.05;
                    if(opacity<0.1){
                        opacity=1.0;
                    }
                    this.setState({opacity:opacity});

                }.bind(this),100);
            },
            render: function () {
                return(
                        <div style={ {opacity:this.state.opacity} }>
                          hello {this.props.name}
                        </div>
                )
            }
        });
        ReactDOM.render(
                <Hello name="world"/>,
            document.getElementById('example')
        );

上面代码在 Hello 组件家在以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒。就重新设置组件透明度，从而引发重新渲染。

另外，组件的 style 属性的设置方式也值得注意要写成

  style={  {opacity:this.state.opacity}  }

这是因为React 组件样式是一个对象，所以第一重大括号表示这是JavaScript 语法，第二重大括号表示样式对象。