React组件生命周期

在本章节我们将讨论React组件的生命周期。
组件的生命周期可分成三个状态：

• Mounting:已插入真实DOM
• Updating:正在被重新渲染
• Unmounting:已移出真实DOM
  生命周期的方法有：
• componentWillMount在渲染前调用，在客户端也在服务端。
• componentDidMOunt:在第一次渲染后调用，只在客户端，之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他的JavaScript框架一起使用，可以在这个方法中调用setTimeout,setlnterval或者发送AJAX请求等操作（防止异步操作阻塞UI)
• componentWillReceiveProps在组件接受到一个新的prop(更新后)时被调用，这个方法在初始话render时不会被调用。
• shouldComponentUpdate返回一个布尔值，在组件接受到新的props或者state时被调用，在初始化时或者使用forceUpdate时不被调用。
  可以在你确认不需要更新组件时使用。
• componentWillUpdate在组件接受到新的props或者state但还没有render时被调用。在初始化时不会被调用。
• componentDidUpdate在组件完成更新后立即调用。在初始化时不会被调用。
• componentWillUnmount在组件从DOM中移除之前立即被调用。
  以下实例在Hello组件加载以后，通过componentDidMount方法设置一个定时器，每隔100毫秒重新设置组建的透明度，并重新渲染：

  class Hello extends React.Component {
   
    constructor(props) {
        super(props);
        this.state = {opacity: 1.0};
    }
   
    componentDidMount() {
      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 () {
      return (
        <div style={{opacity: this.state.opacity}}>
          Hello {this.props.name}
        </div>
      );
    }
  }
   
  ReactDOM.render(
    <Hello name="world"/>,
    document.body
  );

  以下实例初始化state,setNuwnumber用于更新state.所有生命周期在Content组件中。

  class Button extends React.Component{
      constructor(props){
          super(props);
          this.state={data:0};
          this.setNewNumer=this.setNewNumber.bing(this);
      }
  
      setNewNumber(){
          this.serState({data: this.state.date +1})
      }
      render(){
          return(
              <div>
                  <button onClick={this.setNewNumber}>INCREMENT</button>
                  <Content myNumber={this.state.data}></Content>
              </div>
          );
      }
  }
  
  class Content extends React.Component{
      componentWillMount(){
          console.log('Component WILL MOUNT!')
      }
      componentDidMount(){
          console.log('Component DID MOUNT!')
      }
      componentWillReceiveProps(newProps){
          console.log('Component WILL RECEIVE PROPS!')
      }
      shouldComponentUpdate(newProps, newState){
          return true;
      }
      componentWillUpdate(nextProps,nextState){
          console.log('Component WILL UPDATE!')
      }
      componentDidUpdate(prevProps, prevState){
          console.log('Component DID UPDATE!')
      }
      componentWillUnmount(){
          console.log('Component WILL NUMOUNT!')
      }
  
      render(){
          return(
              <div>
                  <h2>{this.props.myNumber}</h2>
              </div>
          );
      }
  }
  ReactDOM.render(
      <div>
          <Button />
      </div>,
      document.getElementById('example')
  );