带你读懂React生命周期

React类似VueJs一样具有自己的生命周期，它们的生命周期都会经历三个阶段：挂载、更新、卸载，而每一个阶段都有其对应的不同的钩子函数，只有充分了解其生命周期，在进行编码的过程中才能在不同的钩子函数中做我们自己想做的事情

图片来源：https://github.com/wojtekmaj/...
使用类组件而不是常规函数的一个优点是能够使用特殊的React方法或钩子来允许我们更新UI和应用程序状态。了解何时使用每种方法对于按照我们所希望的方式加载应用程序非常重要。
我们将针对React生命周期的三个阶段进行讨论：

• 挂载时(Mounting)
• 更新时(Updating)
• 卸载时(UnMounting)

挂载时

当创建一个组建的时候，它会挂载到DOM上。

constructor()

• 当页面加载的时候，最初也是唯一一次被调用
• 用于做一些初始化状态的操作
• 唯一可以修改state的地方(因为react一般想要修改state，一般会调用setState方法)

static getDerivedStateFromProps(nextProps, prevState)

• 当state需要从props初始化时使用
• 每次render或者rerender的时候都会调用
• 尽量不要使用：维护两者一致性会增加复杂度
• 典型场景：表单控件获取默认值

render()

• 这是类组件中唯一必需的方法
• 每次React更新并提交到DOM的时候调用
• 用于为组件编写JSX

componentDidMount()

• 在构造组件并将其添加到DOM上(渲染后)只执行一次
• 可用于获取数据并在渲染完成后立即显示
• 典型场景：获取外部资源

Demo运行结果图:

https://github.com/huangche00...

https://github.com/huangche00...

更新时

每当一个组件的state和props改变的时候，将在页面上重新进行渲染

static getDerivedStateFromProps(nextProps, prevState)

• 每次页面render之前调用，state已更新
• 典型场景：获取render之前的DOM状态
• 很少使用：将props复制到state

shouldComponentUpdate(nextProps, nextState)

• 返回一个布尔类型的值，默认返回true
• 在渲染(render)之前或组件接受到新的state和props的时候马上执行
• 在每次重新渲染之前调用，但不是初始化操作时调用
• 决定Virtual Dom是否要重绘
• 对于性能优化，可以做一些不必重新渲染的操作

render()

• 对于一个类组件，这是唯一必需的方法
• 对于更新，如果shouldComponentUpdate（）返回false，则不会调用render（）。

getSnapshotBeforeUpdate(prevProps, prevState)

• 此方法允许我们捕获在呈现该组件之前未存储在该状态中的某些属性。（即，如果用户滚动到页面上的特定位置，并且我们想要存储该位置并在以后使用它）
• 在React更新并提交新的内容到DOM之前调用
• 很少使用但可以捕获可能快速变化的数据

componentDidUpdate(previousProps, previousState, snapshot)

• 在组件已经重新渲染之后调用
• 用于渲染后的任何DOM更新

Demo运行结果图:

https://github.com/huangche00...

https://github.com/huangche00...

卸载时

在此阶段，组件将被删除并从DOM中清除

componentWillUnmount

• 在从DOM卸载组件之前调用它，做一些回收类的操作，如清除定时器等

https://github.com/huangche00...

https://github.com/huangche00...