实例化

首次实例化

getDefaultProps //创建默认 props
getInitialState //创建默认的State
componentWillMount //在装配发生前被立刻调用。其在render()之前被调用，因此在这方法里同步地设置状态将不会触发重渲。避免在该方法中引入任何的副作用或订阅。
render //渲染装载组建
componentDidMount //渲染组建完毕此时可以请求ajax或者操作dom

实例化完成后的更新数据调用

componentWillReceiveProps
- props是父组件传递给子组件的。父组件发生render的时候子组件就会调用componentWillReceiveProps（不管props有没有更新，也不管父子组件之间有没有数据交换）。
```
getDerivedStateFromProps     
```

getDerivedStateFromProps在组件被实例化以及它接收到新的props之后被调用。它应该返回一个对象来更新状态，或者返回null来表示新的props不需要任何状态更新。

请注意，如果父组件导致组件重新渲染，即使道具没有更改，也会调用此方法。如果您只想处理更改，则可能需要比较新值和先前的值。

调用this.setState()通常不会触发getDerivedStateFromProps()。

shouldComponentUpdate
- /使用shouldComponentUpdate()以让React知道当前状态或属性的改变是否不影响组件的输出。默认行为是在每一次状态的改变重渲，在大部分情况下你应该依赖于默认行为。
  当接收到新属性或状态时，shouldComponentUpdate() 在渲染前被调用。默认为true。该方法并不会在初始化渲染或当使用forceUpdate()时被调用。
  当他们状态改变时，返回false 并不能阻止子组件重渲。
  当前，若shouldComponentUpdate()返回false，而后componentWillUpdate()，render()，和 componentDidUpdate()将不会被调用。注意，在未来React可能会将shouldComponentUpdate()作为一个线索而不是一个严格指令，返回false可能仍然使得组件重渲。
  在观察后，若你判定一个具体的组件很慢，你可能需要调整其从React.PureComponent继承，其实现了带有浅属性和状态比较的shouldComponentUpdate()。若你确信想要手写，你可能需要用this.props和nextProps以及this.state 和 nextState比较，并返回false以告诉React更新可以被忽略。
  
  作用用来校验数据是否需要渲染
componentWillMount
- 在组件挂载之前调用一次。如果在这个函数里面调用setState，本次的render函数可以看到更新后的state，并且只渲染一次。
  这是唯一的会在服务端渲染调起的生命周期钩子函数。通常地，我们推荐使用constructor()来替代。
render //渲染装载组建
getSnapshotBeforeUpdate
- getSnapshotBeforeUpdate()在最近呈现的输出被提交给例如DOM之前被调用。它使您的组件能够在潜在变化之前捕捉当前值（例如滚动位置）。此生命周期返回的任何值将作为参数传递给componentDidUpdate()。
componentDidUpdate
componentDidUpdate()会在更新发生后立即被调用。该方法并不会在初始化渲染时调用。
当组件被更新时，使用该方法是操作DOM的一次机会。这也是一个适合发送请求的地方，要是你对比了当前属性和之前属性（例如，如果属性没有改变那么请求也就没必要了）。
注意
若shouldComponentUpdate()返回false，componentDidUpdate()将不会被调用。
这里相当于组建更新数据全部渲染完，虚拟dom也渲染完可以操作dom

销毁组建周期函数

componentWillUnmount

componentWillUnmount()在组件被卸载和销毁之前立刻调用。可以在该方法里处理任何必要的清理工作，例如解绑定时器，取消网络请求，清理任何在componentDidMount环节创建的DOM元素。

该函数估计是更新props 时候调用。不过setProps这个api不能用报错，不知道是我react版本问题，还是已经废除了 setProps这个api

componentWillReceiveProps
具体看以下demo
更多细节官方文档 https://doc.react-china.org/docs/react-component.html#componentdidmount

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>Hello React!</title>

    <script src="./js/react.min.js"></script>

    <script src="./js/react-dom.min.js"></script>

    <script src="./js/babel.min.js"></script>

</head>

<body>

<div id="app"></div>

<script type="text/babel"  >

var Div=React.createClass({

    getDefaultProps:function () {

        console.log('getDefaultProps')

       return{

           age:'20'

       }

    },

    getInitialState:function () {

        console.log('getInitialState')

       return{

           name:'0'

       }

    },

    componentWillMount:function () {

        console.log('componentWillMount');

    },

    componentDidMount:function () {

        var _this=this;

        console.log('componentDidMount');

    },

    componentWillReceiveProps:function () {

        console.log('componentWillReceiveProps');

    },

     shouldComponentUpdate:function () {

        console.log('shouldComponentUpdate');

        return true;

    },

    componentWillUpdate:function () {

    console.log('componentWillUpdate');

    },

    componentDidUpdate:function () {

        console.log('componentDidUpdate');

    },

    componentWillUnmount:function () {

        console.log('componentWillUnmount');

    },

    updata:function(){

        this.setState( {name:parseInt(this.state.name+1)}  )

    },

    render:function () {

         console.log('render')

        return (<div>

                 <div onClick={this.updata}>更新数据</div>

                 <p>name:{this.state.name}</p>

                  <p>age:{this.props.age}</p>

                 </div>)

   }}

);

ReactDOM.render(

    <Div age='28'/>,

    document.getElementById('app')

);

</script>

</body>

</html>

组建

react组建生命周期

实例化