React ---生命周期

前言

生命周期是描述react组件从开始到结束的过程。
在每个周期中React都提供了一些钩子函数，对组件通过生命周期给予的钩子函数进行管理

生命周期

生命周期分为三个阶段：

挂载期：一个组件实例初次北创建的过程。
更新期：也被称为存在期，是组件在创建后再次渲染的过程。
卸载期：也被称为销毁期，是组件在使用完后被销毁的过程。

如图：

组件的挂载

组件在首次创建后，进行第一次的渲染为挂载期。

1、getDefaultProps()

获取默认的props，也可以用dufaultProps设置组件的默认属性.

2、getInitialState()

设置状态机。
在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。此时可以访问this.props

3、componentWillMount()

在渲染前调用,整个生命周期只调用一次，此时可以修改state。

4、 render()

react最重要的步骤，用于渲染组件 此时就不能更改state了。

5、componentDidMount()

render第一次渲染之后执行的操作，只调用一次。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。

组件的更新

组件更新，指的是在组件初次渲染后，进行了组件状态的改变。

6、componentWillReceiveProps(nextProps)

当父组件更新子组件state时，该方法会被调用

使用componentWillReceiveProps的时候，不要去向上分发，调用父组件的相关setState方法，否则会成为死循环
在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

7、shouldComponentUpdate(nextProps, nextState)

该方法决定组件state或props的改变是否需要重新渲染组件
在初始化时或者使用forceUpdate时不被调用，在组件接收到新的props或者state时会被调用，返回一个布尔值。
组件接受新的state或者props时调用，可以设置在此对比前后两个props和state是否相同，
如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，就不需要新的dom树来和旧的dom树进行diff算法的对比，
可以节省大量性能，尤其是在dom结构相对复杂的时候

8、componentWillUpdata(nextProps, nextState)

组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state

9、render()

组件渲染

10、componentDidUpdate()

组件初始化时不调用，组件重新渲染后调用该方法，此时可以获取dom节点。

组件的卸载

该过程主要涉及一个 方法，即componentWillUnmount，当组件从DOM树删除的时候调用该方法。

11、componentWillUnmount()

组件将要卸载时调用，一些事件监听和定时器需要在此时清除。