这是我参与「掘金日新计划 · 8 月更文挑战」的第19天，点击查看活动详情

组件生命周期（★★★）

聪明出于勤奋，天才在于积累。——华罗庚
我是小晨，今天学习React组件组件生命周期

概述

意义：组件的生命周期有助于理解组件的运行方式，完成更复杂的组件功能、分析组件错误原因等

组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不在时卸载的过程

生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数

构造函数的作用：为开发人员在不同阶段操作组件提供了实际

生命周期阶段

生命周期.png

创建时（挂载阶段）

执行时机：组件创建时（页面加载时）
执行顺序

创建时-函数执行顺序.png

创建时-函数的作用.png

更新时

执行时机：setState()、 forceUpdate()、组件接收到新的props

说明：以上三者任意一种变化，组件就会重新渲染

执行顺序：

更新时.png

更新时-函数作用.png

卸载时

执行时机：组件从页面中消失

作用：用来做清理操作

卸载时.png

不常用的钩子函数

旧版的生命周期钩子函数

旧版生命周期函数.png

theme: Chinese-red highlight: sunburst

新版完整生命会走棋钩子函数

新版生命周期函数.png

`getDerivedStateFromProps()`

getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容
不管原因是什么，都会在每次渲染前触发此方法

`shouldComponentUpdate()`

根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染
当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true

`getSnapshotBeforeUpdate()`

getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()
此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等

总结

本片文章我们能够知道组件生命周期对应的钩子函数，和钩子函数调用的时机

React进阶学习——React组件组件生命周期