react组件生命周期图
?组件的生命周期是什么?
组件的生命周期说的就是组件从被创建到挂载到页面中运行，再到组件卸载的过程。只有类组件才有生命周期。
了解组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件中问题产生的原因等。
React 中生命周期有三个阶段
挂载阶段
挂载阶段常用的生命周期函数有 3 个，执行顺序是 constructor => render => componentDidMount。
| 钩子函数 | 触发时机 | 作用 |
|---|---|---|
| constructor | 创建组件时，最先执行(只执行一次) | 1. 初始化 state 2. 创建 Ref 等 |
| render | 每次组件渲染都会触发 | 渲染 UI（注意： 不能直接调用 setState() ）,可以通过绑定函数调用 |
| componentDidMount | 组件挂载（完成 DOM 渲染）后 | 1. 发送网络请求 2. 获取\操作DOM |
更新阶段
更新阶段常用的生命周期函数有 2 个，执行顺序是 render => componentDidUpdate。
| 钩子函数 | 触发时机 | 作用 |
|---|---|---|
| render | 每次组件渲染都会触发(New props, setState() ,forceUpdate() 会触发) | 渲染 UI（与挂载阶段是同一个 render） |
| componentDidUpdate | 组件更新（完成 DOM 渲染）后 | 操作DOM ，可以获取到更新后的 DOM 内容，和render一样,不要调用 setState |
3个触发组件的更新的操作?New props, setState() ,forceUpdate()
- New props ==>当有新的props传入的时候,或者props的值发生变化时,会触发render;? 只要调用了setState,就会触发render,触发了父组件的render,子组件的 componentDidUpdate就会被触发;
- setState() ==> setState()被调用时候
- forceUpdate()==> 强制更新时会触发render?componentDidUpdate
卸载阶段
更新阶段常用的生命周期函数有 1 个，componentWillUnmount 。
触发时机：组件从页面中消失。
ReactDOM.unmountComponentAtNode(document.getElementById('root'))
| 钩子函数 | 触发时机 | 作用 |
|---|---|---|
| componentWillUnmount | 组件卸载（从页面中消失） | 执行清理工作（比如：清理定时器等、解绑事件等） |