react学习笔记-05 lifecycle

根据React官网，react有三个生命状态:装载（Mounting），更新（updating），卸载（）

一：装载

装载：componentWillMount/componentDidMount（组件即将被装载、组件已经被装载）

export default class blog extends React.Component{
  constructor(props){
    super(props);
    this.state = {count:0};
  };

  componentWillMount(){
    console.log("will mount");
  };
  componentDidMount(){
    console.log("did mount");
　　 console.log(ReactDom.findDOMNode(this));
  };
  render(){
　　 console.log("render");
    return (
      <div>hello world!  {this.state.count}</div>
    );
  }
}

输出结果：　

　

可以看出，在componentWillMount里面进行setState，组件不会重新渲染.如果在componentDidMount里面setState,组件会重新渲染。

在render结束之后，就可以获得DOM 节点了。

在componentDidMount通常做一些ajax或者settimeout/setInterval操作，再更新DOM进行update操作

二：卸载

componentWillunMount:取消事件监听，清除定时器

export default class blog extends React.Component{
  constructor(props){
    super(props);
    this.state = {count:0};
  };

  componentWillMount(){
    console.log("will mount");
    this.setState({
      count:3
    });
  };
  componentDidMount(){
    console.log("did mount");

    console.log(ReactDom.findDOMNode(this));
  };

  componentWillUnmount(){
    console.log("you want kill me?");
  };

  killMyself(){
    ReactDom.unmountComponentAtNode(document.getElementById('blog'));
    console.log("yes, I want to  kill you");
  };
  render(){
    console.log("render");
    return (
      <div>hello world!  {this.state.count}
        <button onClick = {this.killMyself} value="kill"></button>
      </div>
    );
  }
}

　　

如果在componentWillMount里面使用setInterval:

componentWillMount(){
    console.log("will mount");
    var self = this;
    this.timer = setInterval(function(){
      self.setState({count:self.state.count+1});
    },1000);
  };

点击清空按钮后会出现下面warning:

该warning的出现是因为DOM被清除了，但是计时器还在。所以这个时候可以在componentWillUnmount里面清空setInterval

  componentWillUnmount(){
    console.log("you want kill me?");
    clearInterval(this.timer);
  };

三：更新

第一次创建组件的时候，不会调用update相关的方法。

shouldComponentUpdate返回true时，其他的update方法才会被触发。

  shouldComponentUpdate(nextProp,nextState){
    //判断是否需要重新渲染
    console.log("shouldComponentUpdate");
    if(nextState >2){
      return false;
    }
    return true;
  };
  componentWillUpdate(nextProps,nextState){
    //做一些数据的处理
      console.log("componentWillUpdate");
  };
  componentDidUpdate(){
    //可以获取更新后的DOM结构
    console.log("update success");
  };
  doUpdate(){
    this.setState({count:this.state.count+1});
  };
  render(){
    console.log("render");
    return (
      <div>hello world!  {this.state.count}
        <button onClick = {this.doUpdate.bind(this)}>update</button>
      </div>
    );
  }

　　

还有一个重要的update方法：

componentWillReceivePops

用props更新子组件的state,判断子组件是否更新

var SubMessage = React.createClass({
  componentWillReceiveProps (nextProps){
    console.log("子组件将要获得props");
  },

  shouldComponentUpdate (nextProps,nextState){
    if(nextProps.count >4){
      return false;
    }
    return true;
  },
  render(){
    return (<h3>{this.props.count}</h3>);
  }
});

export default class blog extends React.Component{
  constructor(props){
    super(props);
    this.state = {count:0};
  };

  //更新周期

  shouldComponentUpdate (nextProp,nextState){
    //判断是否需要重新渲染
    console.log("shouldComponentUpdate");
    if(nextState.count >8){
      return false;
    }
    return true;
  };
  componentWillUpdate(nextProps,nextState){
    //做一些数据的处理
      console.log("componentWillUpdate");
  };
  componentDidUpdate(){
    //可以获取更新后的DOM结构
    console.log("update success");
  };
  doUpdate(){
    this.setState({count:this.state.count+1});
  };
  render(){
    console.log("render");
    return (
      <div>hello world!  {this.state.count}
        <button onClick = {this.doUpdate.bind(this)}>update</button>
        <SubMessage count={this.state.count}></SubMessage>
      </div>
    );
  }
}