# react组件生命周期
![](https://box.kancloud.cn/bf3928224d9ddc2a05c5dbd292406772_800x344.png)
## 实例化阶段
组件初次实例化时依次调用下列方法
#### getDefaultProps
#### getInitialState
#### componentWillMount
该方法在首次渲染之前调用,也是再 render 方法调用之前修改 state 的最后一次机会。
#### render
该方法会创建一个虚拟DOM,用来表示组件的输出。对于一个组件来讲,render方法是唯一一个必需的方法。
#### componentDidMount
该方法不会在服务端被渲染的过程中调用。该方法被调用时,已经渲染出真实的 DOM,可以再该方法中通过 this.getDOMNode() 访问到真实的 DOM(推荐使用
## 存在期
此时组件已经渲染好并插入到真实dom中,组件的state发生改变时依次调用的方法
#### componentWillReceiveProps
#### shouldComponentUpdate
如果你确定组件的 props 或者 state 的改变不需要重新渲染,可以通过在这个方法里通过返回 false 来阻止组件的重新渲染,那么后续方法也不会执行。
#### componentWillUpdate
注意不要在此方面里再去更新 props 或者 state。
#### render
该方法会创建一个虚拟DOM,用来表示组件的输出。
#### componentDidUpdate
可以在这里访问并修改 DOM
## 销毁时
#### componentWillUnmount
- Houser的个人Wiki
- Javascript
- 语言基础
- 变量
- 操作符整理
- new
- Ajax
- 事件
- 遍历
- 字符串转数字方法
- 原型链
- apply/call/bind
- 异步编程
- 模块化
- 继承的方式
- 对象的创建方式
- 内存泄漏
- js延迟加载
- 数据类型
- typeof
- 垃圾回收
- 作用域
- 闭包
- this
- es6
- 代码片段
- 对象拷贝
- Node.js
- 模块
- 库&框架
- Jquery
- 优点
- 组件库
- React
- React原理
- Key的作用
- JSX
- Redux
- Mobx
- 生命周期
- Typescript
- HTML&CSS
- viewport meta
- websocket
- webwork
- web GL
- html全局属性
- iframe
- 页面间通讯
- SVG
- 盒模型
- 输入url到显示的过程
- BFC(块格式化上下文)
- 动画
- CSS 秘密花园
- 前端
- webpack
- 后端
- nginx
- springboot
- 网络
- 跨域
- 网络攻击
- TCP
- Https
- Http状态码
- 缓存策略
- Http2
- 数据结构&算法
- 常用数据结构
- 开发&编码
- Git
- 分支策略
- 基本操作
- VSCode
- 工具
- App开发
- ReactNative
- 项目&业务
- Docker
- 协作工具
- 前端性能优化
- 登录授权
- 软件工程
- 渐进增强和优雅降级
- 计算机基础
- 设计模式
- 单例模式
- 工厂模式
- 发布订阅模式
- 适配器模式
- 代理模式
- 外观模式
- 命令模式
- 桥接模式
- 模板模式
- 职责链模式
- 正则