ReactJS -- 生命周期

生命周期的阶段

Mount阶段 : 组件第一次在DOM树中被渲染的过程

Update阶段 : 组件状态发生变化, 重新更新渲染的过程

Unmount阶段 : 组件从DOM树中被移除的过程

Error阶段 : 渲染阶段捕捉到错误

render阶段 : 返回值是页面渲染的视图

pre-commit阶段 : 能够读取DOM

commit阶段 : 能够使用DOM, 可以发call或者订阅等

不同阶段中的生命周期

Mount阶段

在这个阶段中, 组件被创建, 然后插入到DOM中, 进行视图渲染, 该过程只进行一次.

执行的方法: constructor --> getDerivedStateFromProps --> render --> componentDidMount

1. constructor: 在类组件创建实例时调用, 初始化的时候执行一次, 可以在初始化的时候控制组件

2. getDerivedStateFromProps: 在props改变时调用, 把新的值映射到state中

3. render: 根据props和state渲染UI

4. componentDidMount: 组件已经挂载完成, 官方推荐在这里进行Ajax请求

Update阶段

在这个阶段中, 组件的props或者state改变时, 重新渲染视图, 该过程可进行多次.

执行的方法: getDerivedStateFromProps --> shouldComponentupdate --> render --> getSnapshotBeforeUpdate --> componentDidMount

1. getDerivedStateFromProps: 在props改变时调用, 把新的值映射到state中

2. shouldComponentupdate: 判断是否需要重新渲染组件, 当接收到新的props和state的时候被调用, 返回布尔值

3. render: 根据props和state渲染UI

4. getSnapshotBeforeUpdate: 最近一次render还没有到componentDidMount之前, 可以获取DOM改变之前的信息

5. componentDidMount: 组件已经挂载完成, 官方推荐在这里进行Ajax请求

Unmount阶段

在这个阶段中, 组件被从DOM树中被移除, 销毁视图

执行的方法: componentWillUnmount

1. componentWillUnmount: 清理全局事件