十.组件的生命周期

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

1.Mounting:已插入真实 DOM

2.Updating:正在被重新渲染

3.Unmounting:已移出真实 DOM

 

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

componentWillMount()

componentDidMount()

componentWillUpdate(object nextProps,object nextState)

componentDidUpdate(object prevProps,object prevState)

componentWillUnmount()

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

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用

shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

 

<!DOCTYPE html>
<html>
  <head>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <script src="js/browser.min.js"></script>
  </head>
  <body>
    
    <div id="example"></div>
    
    <script type="text/babel">
      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
      )
    </script>
  
  </body>
</html>
posted @ 2016-09-23 16:41  约翰·史密斯  阅读(173)  评论(0)    收藏  举报