React生命周期

     React生命周期
近期做了一个项目脉冲云，脉冲云是一个基于敏捷思想，提高开发效率的工具；开发/运维一体化的协作平台。脉冲云的前端用的是react技术，下面简单介绍下在开发过程中自己对于react生命周期的理解，以及一些运用。

constructor(props)
构造函数，在创建组件的时候调用一次，可以在这里初始化state或者其他值

  constructor(props) {
    super(props);
    this.state = {
      disabled: false
    };
    this.log = “log”;
  }

componentWillMount()
在组件挂在前调用，且只会调用一次（state或者props发生改变并不会触发），这里可以修改state或者做异步请求。此处如更改state会在render()渲染时获取修改后的state

 componentWillMount() {
    //this.setState({xxx})
    //异步请求
  }

componentDidMount()
初始化渲染后执行，这时可以获取相应的DOM节点。这里可以挂载一些其他的插件之类的，也可以执行异步请求

componentDidMount() {
    //挂载其他插件
    //异步请求
  }

componentWillReceiveProps(nextProps)
组件在接受到新的props时执行，nextProps是接受到的新的props，可以通过this.props获取老的props。例如：当父组件传入新的props的时候可以在此做些简单的处理

componentWillReceiveProps(nextProps){
    let params = this.params;
    let nextParams = nextProps.params;
 if (params.sub !== nextParams.sub){
       //简单的逻辑处理
  }
}

shouldComponentUpdate(nextProps, nextState)
组件在接受新的props或者state执行，默认返回值true，为false时不会重新渲染。nextProps是接受到的新的props，可以通过this.props获取老的props。nextState是接受到的新的state，可以通过this.state获取老的state。例如：当父组件传入的props与老的props相同时不重新渲染。
shouldComponentUpdate(nextProps, nextState){
    let params = this.params;
    let nextParams = nextProps.params;
    let state = this.state;
    let nextState = nextState.params;
 if (params.sub === nextParams.sub){
       return false;
  }
 if (state === nextState.sub){
       return false;
  }
    return true;
}

componentWillUpdate()
组件渲染前执行，接受新的props、state或者调用forceUpdate()

componentDidUpdate()
组件每次渲染都会执行,可以获取相应的DOM节点

componentWillUnmount()
组件在销毁时调用，可在这里执行清除定时器、断开socket等。
componentWillUnmount(){
   this.socket.close();
}

render()
render是一个React组件必不可少的函数,用于将模板转为 HTML 语言，并插入指定的 DOM 节点(不要在渲染时修改state)。可以返回null来表示不需要渲染任何东西，也可以根据不同的情况渲染不同的模板或者组件。

 render() {
   const { errors } = this.state;
   //const { errors } = this.state;
   if(errors){
       return (<ErrorPage />);
  }
  return (<TextField />)
}