react-组件的生命周期

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

• 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 ) 组件判断是否重新渲染时调用。

我们看一个例子
ES5写法

var Hello = React.createClass({  getInitialState: function () {    return {      opacity: 1.0    };  },  componentDidMount: function () {    this.timer = setInterval(function () {      var opacity = this.state.opacity;      opacity -= .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.body);

ES6写法

import React,{ Component } from "react";import { render } from "react-dom";class Hello extends Component{    constructor(props){        console.log('init');        super(props);        this.state = {            opacity: 1.0,            background: 'red'        }    }    render(){        return(            <div className="hello" style={{ opacity: this.state.opacity,background: this.state.background}}>                Hello            </div>        )    }    componentDidMount(){        //alert("did");        console.log(this);        var self = this;        self.timer = setInterval(function(){            var opacity = self.state.opacity;            opacity -= .05;            if( opacity < 0.1 ){                opacity = 1.0;            }            self.setState({                opacity: opacity            })        },100)    }    componentWillMount(){        //alert("will");    }}export default Hello;