React3 生命周期函数

组件初始化：constructor

        我们定义了每一个组件都是一个类(class)，这些类被实例化以后才能作为 ReactDOM中的一个节点渲染到页面上

        所以，通过 ReactDOM.render 或者在某个组件中通过 JSX 表达式将一个组件 第一次渲染到页面上时，组件首先要做的就是对组件进行实例化

        实例化主要做的事情：

                创建一个组件的实例对象(也就是Element，通常对应一个JSX表达式。如：<MyComponent /> )

                获取组件的默认属性

                获取组件的初始内部状态(在 constructor 中 this.state=xxx)

componentWillMount

        在上文中使用过此函数

        在组件被渲染被渲染到页面上之前执行，在组件的整个生命周期只执行一次。这此可以调用 setState 更新内部状态，但是更推荐将状态更新放到 constructor 中

        该函数执行完后会立刻执行 render 方法并将组件渲染到页面上，所以在这里执行 setSate 不会触发额外的渲染过程。

componentDidMount

        在上文中使用过此函数

        组件被渲染到页面上后立马执行，在组件的整个生命周期内只执行一次

        此时可以进行如下操作：

                1. 某些依赖组件 DOM 节点的操作

                2. 发起网络请求

                3. 设置 setInterval、setTimeout等计时器操作

       在这里可以调用 setState 更新组件内部状态，且会触发一个重新渲染的过程，即会重新执行 render 方法并更新视图

componentWillReceiveProps

        componentWillReceiveProps(nextProps)

        该生命周期函数可能存在两种情况下被调用：

                组件接收到了新的属性。新的属性会通过 nextProps 获取到

                组件没有接收到新的属性，但是由于父组件重新渲染导致当然组件也被重新渲染

        只要记住，当该函数被调用时，并不一定是因为属性发生了变化

        此函数也可以调用 setState 更新组件的内部状态，同样不会触发额外的重新渲染操作，React会用更新后的属性和内部状态进行一次重新渲染

shuoldComponentUpdate

        shouldComponentUpdate(nextProps,nextState)

        这是一个询问式的生命周期函数，所以该函数需要一个返回值 true/false

        如果为 true ，组件将触发重新渲染过程

        如果为 false，组件将不会触发重新渲染

        此处不能调用 setState 更新组件状态

        由于组件属性或者内部状态被改变时都会触发组件重新渲染，所以该函数接收两个参数：

                新的属性( nextProps )

                新的状态( nextState )

        注意：在处理生命周期函数时，切记要兼顾属性和状态！

        在 《React1 创建React组件、组件的属性》 提到过 React 有两个基类：Component与PureComponent

        两者的区别在于 PureComponent 简单的实现了一下 shouldComponentUpdate 函数，当属性和状态都没有发生改变时返回 fasle 以避免额外的开销

componentWillUpdate

        componentWillUpdate(prevProps,prevState)

        在组件重新渲染的过程中，重新执行 render 方法并更新组件视图后立即执行该函数。

        类似组件第一次渲染过程中的 componentDidMount ，该函数在第一次渲染时不会执行

        此时可以进行如下操作：

                执行依赖新 DOM 节点的操作

                依据新的属性发起新的网络请求

                        (此处一定要注意，一定要在确认属性发生变化后在发起网络请求，否则会陷入死循环：didUpdate->ajax->changeProps-didUpdate)

componentWillUnmount

        当组件被从页面中移除之前调用，可进行清理，如清理定时器、终止网络请求等

componentDidCatch

        componentDidCatch(error,info)

        此函数是 React 新加入的一个生命周期函数。

        定义了此函数的组件将会成为一个 错误边界，可以有效的将错误限制在一个有限的范围内，而不会导致整个应用崩盘

        错误边界组件，可以捕获其整个子组件树内发生的任何异常，但是却不能捕获自身的异常

        示例：

        https://codepen.io/gaearon/pen/wqvxGa?editors=1010

       

文件借鉴： http://react-china.org/t/react-react/15548