React组件生命周期
前言
在我开始边学习边用react做开发时，并没有去了解react的生命周期相关内容，只在我需要运用生命周期函数时，查询到需要运用的函数并直接使用，但不了解生命周期，使我的项目在运行过程中，有许多冗余操作。
因此理解react组件生命周期很有必要，下面通过阅读英文文档就此展开讨论。
生命周期函数： 生命周期函数（钩子函数）通俗的说就是在某一时刻会被自动调用执行的函数。
生命周期的四个阶段
- 组件初始化(initialization)阶段
- 组件的挂载(Mounting)阶段
- 组件的更新(update)阶段
- 卸载(Unmounting)阶段
一.组件初始化阶段
constructor ()是代码中类的构造方法，App类继承了react基类，才能有render()，生命周期等方法可以使用。构造函数constructor()是特殊的函数，每创建一个新的对象都会调用它，super()用来调用基类的构造方法，在调用初始化super的时候，将父组件的props注入到子组件，此时才能接触到this.props。constructor()用来做一些组件初始化工作（初始化props，state），并且在其中可以通过this.state设置或更改，在其他地方更改设置state的值，必须要通过this.setState。
二.组件的挂载阶段
(1) componentWillMount（弃用）
组件被挂载到页面之前调用，整个生命周期中只会调用一次。与构造函数没有太大的区别，可以把写在这里的内容写到constructor()中。在这里调用this.setState不会引起组件重新渲染。
(2) componentDidMount
组件被挂载到页面之后调用，整个生命周期只调用一次
三.组件的更新阶段
(1) componentWillReceiveProps(nextProps)(弃用)
函数在父组件重新渲染时调用，父组件重新渲染，重新传入props，不管props的值是否发生改变，都会执行。由于无论props是否发生变化，都会调用，在实际render之前，可能会多次调用此函数，因此不建议使用，通过下面的函数进行优化。
(2) shouldComponentUpdate(nextProps,nextState,nextContext)
在组件挂在以后，每次调用setState后，比较nextProps，nextState与当前组件的值，判断是否需要继续执行，重新渲染组件，与前一种函数相比，避免了不必要的渲染。
(3) componentWillUpdate(nextProps,nextState)(弃用)
在组件更新之前，当shouldComponentUpdate返回true继续执行时被调用。只有在组件实际重新渲染时才会调用它。与所有其他componentWill*函数类似，这个函数可能会在呈现之前被多次调用，所以它不建议执行导致操作的副作用。
(4) componentDidUpdate(prevProps,prevState,prevContext)
prevProps和prevState这两个参数指的是组件更新前的props和state，组件更新完成之后调用，组件初始化时候不调用。即首次render之后调用componentDidMount，其它render结束之后都是调用此函数
四. 组件卸载阶段
componentWillUnmount()
卸载阶段唯一的生命周期函数，组件即将被卸载时执行，进行删除componentDidMount里注册的事件、定时器等清理工作。
以上是 React组件生命周期 的全部内容， 来源链接： utcz.com/z/383767.html
