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;