react 组件生命周期

组件的生命周期可分成三个状态：
Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM

生命周期的方法有：
componentWillMount 在渲染前调用,在客户端也在服务端。
componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。   可以在你确认不需要更新组件时使用。
componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount在组件从 DOM 中移除之前立刻被调用。当组件要被从界面上移除的时候，就会调用componentWillUnmount(),在这个函数中，可以做一些组件相关的清理工作，例如取消计时器、网络请求等

getDefaultProps      object getDefaultProps()
执行过一次后，被创建的类会有缓存，映射的值会存在this.props,前提是这个prop不是父组件指定的。 这个方法在对象被创建之前执行，因此不能在方法内调用this.props ，另外，注意任何getDefaultProps()返回的对象在实例中共享，不是复制

getInitialState      object getInitialState()
控件加载之前执行，返回值会被用于state的初始化值

componentWillMount    void componentWillMount()
执行一次，将要装载，在初始化render之前执行，每个组件render之前立即调用，可以在服务端被调用，也可以在浏览器端调用。如果在这个方法内调用setState，render()知道state发生变化，并且只执行一次

render       ReactElement render()
render的时候会调用render()会被调用 
调用render()方法时，首先检查this.props和this.state返回一个子元素，子元素可以是DOM组件或者其他自定义复合控件的虚拟实现 
如果不想渲染可以返回null或者false，这种场景下，react渲染一个<noscript>标签，当返回null或者false时，ReactDOM.findDOMNode(this)返回null 
render()方法是很纯净的，这就意味着不要在这个方法里初始化组件的state，每次执行时返回相同的值，不会读写DOM或者与服务器交互，如果必须如服务器交互，在componentDidMount()方法中实现或者其他生命周期的方法中实现，保持render()方法纯净使得服务器更准确，组件更简单

componentDidMount         void componentDidMount()
在初始化render之后只执行一次，在这个方法内，可以访问任何组件，componentDidMount()方法中的子组件在父组件之前执行
从这个函数开始，就可以和 js 其他框架交互了，例如设置计时 setTimeout 或者 setInterval，或者发起网络请求

shouldComponentUpdate
boolean shouldComponentUpdate(
  object nextProps, object nextState
}
这个方法在初始化render时不会执行，当props或者state发生变化时执行，并且是在render之前，当新的props或者state不需要更新组件时，返回false
shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}
当shouldComponentUpdate方法返回false时，就不会执行render()方法，componentWillUpdate和componentDidUpdate方法也不会被调用
默认情况下，shouldComponentUpdate方法返回true防止state快速变化时的问题，但是如果·state不变，props只读，可以直接覆盖shouldComponentUpdate用于比较props和state的变化，决定UI是否更新，当组件比较多时，使用这个方法能有效提高应用性能

componentWillUpdate
void componentWillUpdate(
  object nextProps, object nextState
)
当props和state发生变化时执行，并且在render方法之前执行，当然初始化render时不执行该方法，需要特别注意的是，在这个函数里面，你就不能使用this.setState来修改状态。这个函数调用之后，就会把nextProps和nextState分别设置到this.props和this.state中。紧接着这个函数，就会调用render()来更新界面了

componentDidUpdate
void componentDidUpdate(
  object prevProps, object prevState
)
组件更新结束之后执行，在初始化render时不执行

什么是componentWillReceiveProps？
componentWillReceiveProps在初始化render的时候不会执行，它会在Component接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染。这个东西十分好用，但是一旦用错也会造成十分严重的后果。
在componentWillReceiveProps这个回调函数中，我们可以获取到就是props，通过this.props来获取，然后新的props则是通过函数的参数传入，在这里我们可以比较两个props从而对本组件的state作出安全的变更然后重新渲染我们的组件或者是触发 子组件内的某些方法。

//这种方式十分适合父子组件 的互动，通常是父组件需要通过某些状态控制子组件渲染亦或销毁...
    componentWillReceiveProps(nextProps) {//componentWillReceiveProps方法中第一个参数代表即将传入的新的Props
        if (this.props.sharecard_show !== nextProps.sharecard_show){
            //在这里我们仍可以通过this.props来获取旧的外部状态
            //通过新旧状态的对比，来决定是否进行其他方法
            if (nextProps.sharecard_show){
                this.handleGetCard();
            }
        }
    }

    上面是componentWillReceiveProps常用的方式，但是如果使用不当可能会导致以下后果，一般体现为组件陷入渲染死循环，他会一直接受新的外部状态导致自身一直在重渲染。

componentWillReceiveProps(nextProps) {
        if (this.props.sharecard_show !== nextProps.sharecard_show){
            if (nextProps.sharecard_show){
                this.handleGetCard();
            }
        }
    }
    handleGetCard() {
        this.props.test()
    }
    //父组件内
    test() {
        this.setState({
            sharecard_show: !this.state.sharecard_show
        })
    }

一旦项目中出现这样的代码，有很大几率就会陷入死循环，这两个组件会一直在传递状态并且重新渲染，然后页面估计就卡挂了。这是其中一个需要注意的地方，另外我们需要谨记，在componentWillReceiveProps中想作任何变更最好都将两个状态进行比较，假如状态 有异才执行下一步。不然容易造成组件的多次渲染，并且这些渲染都是没有意义的。