react生命周期

装载过程：

Constructor:
初始化state；
绑定成员函数的this环境（bind、：： ）防止以解构的方式进行全局作用域进行调用；
例：this.fn=this.fn.bind(this)或this.fn=::this.fn

GetInitialState：初始化state值,必须结合React.createClass()使用，使用es6的方式，此函数无效果；

  getInitialState:function(){
    return {
      name:"zhangsan"
    }
  },
    
  getDefaultProps:function(){
    return {
      name:"zhangsan" //这里的zhangsan相当于默认值
    }
  }
})

GetDefaultProps：初始化props值,必须结合React.createClass()使用，使用es6的方式，此函数无效果，用属性defaultProps代替；

  constructor(props){
super(props)
this.state={data:new Date()}
  }
  render(){
    return (
      <ul>
        <li><ClickCount name="third" num={7}></ClickCount></li>
      </ul>
    )
  }
}

Test.defaultProps={
    name:"moren"
  }

ComponentWillMount：在render函数调用之前进行调用；

Render：并不做实际的渲染动作，只返回一个jsx描述结构，最后渲染与否由react来决定；必须是个纯函数，不能设计到数据的更变（this.setState）；

    return (
      <ul>
        <li><ClickCount name="third" num={7}></ClickCount></li>
      </ul>
    )
  }

ComponentDidMount ：在render函数调用之后进行调用；但不是在render函数调用之后立即调用，而是当所有的dom树挂载并渲染完成后才会调用，这是因为render函数并不进行渲染，而只是返回一个jsx对象，渲染的工作由react库进行，只有当所有的组件的jsx对象组合完毕之后，react通过对比后才会渲染，所有此钩子函数是发生的所有组件的render函数都执行后才会执行；（只能在浏览器端触发）
注：与angular中的link或者post函数有点相似，但是这里不仅指子组件，而是当前组件中的所有组件，包括兄弟组件；提供了dom操作的接口

更新过程：

ComponentWillReceiveProps: （参数只有props）传入的props的改变或者组件进行刷新（forceUpdate函数触发组件的刷新）都会触发此函数，但是通过this.setState改变的数据则不会触发此函数，

ShouldComponentUpdate：react组件的钩子函数两个需要有返回值的钩子函数之一，另一个为render，此钩子函数的返回值为一个bolen值，如果为true时，则prop的改变以及state的改变都会引起组件的刷新，如果为false时，则不再进行渲染；此钩子函数接受两个参数，一个是nextProps，一个是nextState，可以将将要更新的值和此时的做对比，然后返回true和false来进行性能的校优；

ComponentWillUpdate：跟componentWillMount相似
Render
ComponentDidUpdate：跟componentDidMount相似

卸载过程：

ComponentWillUnmount:此钩子函数可以在组件卸载前执行，可以进行手动添加dom元素的删除，以及计时器和事件监听的移除；

使用方法：

  setNumber(){
        this.setState({
           count:this.state.count+1
        },()=>{
            this.componentWillUnmount()   //调用销毁组件
        })
    }
//销毁生命周期
  componentWillUnmount(){
      if(this.state.count>3){
                //将要销毁的组件写入 括号中
  ReactDOM.unmountComponentAtNode(document.getElementById('root'))
            }

    }
点击button按钮 （实现数字加一，如果大于3时数字销毁组件）
 <button onClick={this.props.setNumber}>{this.props.count}</button>

---

---

---

---

---

---

---

1：construct 类似 Vue 中的 beforeCreated 和 Created；
操作:(1)数据的请求（2）当前组件的检测；

2：componentWillMount
介绍：类似Vue 中 beforemount ；在render函数调用之前进行调 用；：

3：render 纯函数 ；
操作 (1)不能调用setstate进行数据的改变，否则会陷入死循环
（2）不做数据的产生和保存，
（3）返回数据和Dom拼接好的jsx结构
注：（1）因为数据更新后会触发render周期 ,所以render中进行数据改变会陷入死循环（2）必须有返回值return

4：ComponentDidMount
介绍：dom编译完成，并渲染到真实dom中时调用
操作：(1)可以做dom的处理
（2）可以做具体的事件监听
（3）某些插件的实例化

5：componentWillReceiveProps
介绍：当父组件给子组件的数据改变时触发该函数
操作 （1）可以将props再次赋给state,也可以说是用来监听props改变

6：shouldComponentUpdate(props,state)
介绍：对于项目提高渲染性能时使用；
操作 （1）可以对props和state的值进行对比 然后通过返回true和false 来控制是否更新组件；（在浏览器->more tools->rendering里勾选Paing flashing可以高亮页面重绘的部分）
注：（1）必须有返回值 ture || false

7：componentWillUpdate
介绍 ：在render之前最后一次可以改变数据的地方
8：componentDidUpdate 同 componentWillMount

9：ComponentWillUnmount:
介绍 ：此钩子函数可以在组件卸载前执行，可以进行手动添加dom元素的 删除，以及计时器和事件监听的移除；
操作：（1）所有跟dom相关的操作，在组建销毁之前一定要在这里做相应的处理；否则会出错
整个react的组件的生命周期可以分成几种情况去执行：
组件第一次渲染：
getDefaultProps -> getInitialState -> componentWillMount -> render -> componentDidMount

卸载组件：
componentWillUnmount

组件第二次渲染：
getInitialState -> componentWillMount -> render -> componentDidMount

组件props发生改变：
componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate

组件state发生改变(props并未改变)：
shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate