浅聊本人学习React的历程——第一篇生命周期篇

　　做为一个前端小白，在踏入前端程序猿行业的第三年接触了React，一直对于框架有种恐惧感，多是对陌生事物的恐惧内心吧，致使本身一直在使用原生JS和JQ做为开发首选，可是在接触了React以后，发现了其强大的能力，尤为是在开发大型企业级应用的时候，其自带的生命周期函数和原型能够帮助你减小大量的冗杂的JS代码，同时页面渲染十分顺畅，话很少数，下面进入React。

　　涉及到生命周期函数，首先要问几个问题。有哪些生命周期函数？每一个生命周期函数都是在什么时候被加载？加载之后的效果都是什么？这里面有趣的地方在哪里？在解答这几个问题以前先上生命周期图~

　　1、有哪些生命周期函数（即钩子函数）

　　按照常规所记的顺序，依次以下：constructor、componentWillMount、render、componentDidMount、componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、componentDidUpdate、componentWillUnmount。

　　2、具体函数分析

　　1. constructor()： 构造函数

　　constructor函数在组件被加载以前调用，也就是最早被调用，并且只会被调用一次。注意：该函数内部第一句必须是super（props），若是不加这句话，会报‘this’ is not allowed before super()的错！

　　该函数做用是在一开始定义全局状态变量，同时默认接收两个参数props和context，

　　2. componentWillMount() 

　　componentWillMount函数在组件初始渲染（即reader() 被调用以前）被调用，也是只会被调用一次。能够在该函数中进行state状态机的更改，在以后的render函数会看到更新后的state，并且不会重复渲染。

　　注意：该函数在在react16.3.0版本中止维护，若是要使用的话，请用UNSAFE_componentWillMount来代替。

　　3. render() ： 渲染组件

　　render函数执行在componentWillMount以后，componentDidMount以前被调用。该函数的做用是渲染将要挂载的组件。千万不要在该函数之中修改state，这样会致使死循环，虽然在其中能够设置state，可是你在渲染组件以前所进行的全部状态机的操做都会失效。它会在状态机更新和初始化页面的时候从新加载。

　　4.componentDidMount() 

　　componentDidMount函数在组件挂载完成以后加载，也是只会被调用一次。在其中可使用React中的特殊属性—refs来准肯定位你须要操做或者获取的组件实例。

　　若是子组件中也设置了该函数，那么子组件中的该函数将在父组件的该函数执行前被调用！

　　5.componentWillReceiveProps ( nextProps ) 

　　该函数被调用在props即将变化以前，也就是说当它接收到新的props时，就会被调用，该函数会接收一个参数nextProps，即新的props，一样能够经过this.props来调用以前的props。它的做用是渲染挂载组件，在该函数内部也可使用refs（看上一个函数）来精肯定位一些须要操做的实例。

　　注意：该函数在在react16.3.0版本中止维护，若是要使用的话，请用UNSAFE_componentWillReceiveProps来代替。

　　6. shouldComponentUpdate（nextProps， nextState）

　　该函数有些特殊，当组件挂载完成以后，每次调用setState的时候才会调用该函数。主要是用来判断是否须要从新挂载组件，当调用该函数时默认从新挂载组件，从新渲染render。该函数传入两个参数，一个是nextProps即新的props，另外一个是nextState即新的state。在大型企业级后台应用中，当部分变化不须要从新加载render的时候，能够在该函数中进行操做。

　　7. componentWillUpdate()

　　该函数在初始化之时不会被调用，可是在接收到新的props或者当前组件的state状态机更新以后并被当前函数接收到的时候被调用，在该函数之中不能够修改状态机，不然会形成死循环。

　　注意：React v16.3后废弃该生命周期，能够用新的周期 getSnapshotBeforeUpdate

　　8. componentDidUpdate()

　　初始化（即第一次渲染组件）时调用componentDidMount，在此以后的全部render结束以后都要调用componentDidUpdate。在该方法中能够在组件更新以后操做DOM元素。

　　9.componentWillUnmount()

　　该函数在组件即将被卸载的时候被调用，通常在该方法中执行清理操做，例如定时器等。

　　嗯嗯，做为一名小白，暂时的理解就到此为止，有任何不对或者有疑问的地方欢迎各位大佬随时评论。

　　友情连接：https://blog.csdn.net/qq_40023436/article/details/86508580