React——组件生命周期

学习使用ReactJS已经有一段时间了，带着做项目的一些经验回顾了一下React的基本入门知识。再看一遍的感觉很不一样，尤其是对组件的生命周期，有了更加直观的理解。这一篇就来介绍一个React使用中非常关键的一个知识点，组件的生命周期。

组件的生命周期可以分为三个阶段，初始化阶段、运行中阶段和销毁阶段。在代码中我们主要关注的是各个阶段中调用的hook函数。

初始化阶段

1.getDefaultProps 这个函数只会调用一次，在组件的实例中共享引用，可以对属性进行初始化的设置。这个我在平时的代码中使用的比较少。

2.getInitialState 这个函数是初始化每个实例的特有状态，不同于getDefaultProps，每个实例都会进行调用。这个函数在代码中的应用就是设置组件的初始化状态，比如是否loading等等。

3.componentWillMount 这个函数是程序员在render前最后一次修改状态的机会。

4.render 这个函数会去渲染DOM，在这个函数中可以访问属性(props)和状态(state)。

5.componentDidMount 这个函数也是经常用到的，这时DOM已经渲染完成，可以对DOM进行修改，可以加一些我们需要的监听函数。

以上的5个函数是按照组件渲染的时间顺序排序的。

运行中阶段

1.componentWillReceiveProps 可以在这个函数中修改新的属性和状态，这个函数应用也比较多，可以根据接受到的属性来对组件进行不同的控制。

2.shouldComponentUpdate 如果这个函数 return false 那么他会阻止render的调用，省去了diff算法，可以提高性能。但是一般不是特别建议使用这个函数，用不好的话会出现一些难以排查的问题。

3.componentWillUpdate 这个函数不同于componentWillReceiveProps，不可以进行属性和状态的修改。

4.render 和初始化阶段一样，会在组件接收到新的属性的时候进行调用。重新渲染。

5.componentDidUpdate 可以在这个函数里面修改DOM。这个函数有个经常出现的错误，就是在这个函数中进行setState的操作，这样会引起无限循环的问题，最终导致栈溢出，使用时一定要牢记。

销毁阶段

1.componentWillUnmount 销毁阶段只有这一个hook函数，这个是组件被移除DOM之前会触发的，这时候我们要进行时间监听函数的移除，还有计时器的移除，也是一个非常常用的函数。

感觉经常回顾基础知识是一个很好的总结。