React学习（七）—— 生命周期函数

学习目标：能够阐述React最常用的生命周期的执行顺序，触发时机和一般的应用场景

目录

一、概述

二、详解挂载阶段

1、执行顺序

 2、触发时机和应用场景

三、详解更新阶段

1、执行顺序

 2、触发时机和应用场景 

四、详解卸载阶段

---

一、概述

        组件的生命周期是指组件从被创建到挂载到页面中运行起来，再到组件不用时卸载的过程，注意，只有类组件才有生命周期（类组件需要实例化， 函数组件不需要实例化）

以下为 16.3 版本之后的生命周期函数的图：

图源：React lifecycle methods diagram

        从图中可以看出常用的生命周期有constructor render componentDidMount componentDidUpdata componentWillUnmount

        需要注意的是，在Render阶段，是要保持纯净的，也就是说不要进行数据更新或者是发送请求等操作。

二、详解挂载阶段

1、执行顺序

 2、触发时机和应用场景

钩子 函数	触发时机	应用场景
constructor	创建组件时，最先执行，初始化的时候只执行一次	1. 初始化state（一般不用）  2. 创建 Ref 3. 使用 bind 解决 this 指向问题等（可以直接使用箭头函数解决）
render	每次组件渲染都会触发	渲染UI（注意： 不能在里面调用setState() ） render会再每次组件渲染的时候触发，更新数据→触发render→更新数据→......就会无限循环啦
componentDidMount （最常用）	组件挂载（完成DOM渲染）后执行，初始化的时候执行一次	1. 发送网络请求   2.DOM操作

三、详解更新阶段

1、执行顺序

 2、触发时机和应用场景 

钩子函数	触发时机	应用场景
render	每次组件渲染都会触发	渲染UI（与 挂载阶段 是同一个render）
componentDidUpdate	组件更新后（DOM渲染完毕）	DOM操作，可以获取到更新后的DOM内容，不要直接调用setState

四、详解卸载阶段

钩子函数	触发时机	作用
componentWillUnmount	组件卸载（从页面中消失）	执行清理工作（比如：清理定时器等）