React组件（进阶--生命周期 ）

目录

一.生命周期 - 概述

二.生命周期 - 挂载阶段 

三.生命周期 - 更新阶段 

四.生命周期 - 卸载阶段 

文章推荐：

1.JSX基础（入门）

2.React组件（入门） 

3.React组件动状态（入门） 

4.React组件通信（入门） 

5.react组件（进阶--children/props） 

---

一.生命周期 - 概述

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

 打开有惊喜：React lifecycle methods diagram

二.生命周期 - 挂载阶段 

钩子 函数	触发时机	作用
constructor	创建组件时，最先执行，初始化的时候只执行一次	1. 初始化state  2. 创建 Ref 3. 使用 bind 解决 this 指向问题等
render	每次组件渲染都会触发	渲染UI（注意： 不能在里面调用setState() ）
componentDidMount	组件挂载（完成DOM渲染）后执行，初始化的时候执行一次	1. 发送网络请求   2.DOM操作

三.生命周期 - 更新阶段 

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

四.生命周期 - 卸载阶段 

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

文章推荐：

        1.JSX基础（入门）

        2.React组件（入门） 

        3.React组件动状态（入门） 

        4.React组件通信（入门） 

        5.react组件（进阶--children/props）