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

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

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

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

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

二、具体函数分析

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