200303&react生命周期事件

react生命周期事件

0. 概要

• 1.react组件生命周期的3个阶段
• 2.一些建议
• 3.参考

1. react组件生命周期的3个阶段

• 1.1 装载 - Mounting
• 1.2 更新 - Updating
• 1.3 卸载 - Unmounting

1.1 装载 - Mounting

当装载react组件的时候，有 4个 生命周期方法可以在dom装载组件之前调用。

• 1.1.1 构造函数 - Constructor
• 1.1.2 监听props变更 - getDerivedStateFromProps()
• 1.1.3 dom渲染函数 - render()
• 1.1.4 组件装载完毕函数 - componentDidMount()

1.1.1 构造函数 - Constructor

• 当装载组件的时候，第一个被调用的方法
• 主要用于初始化一些值。比如store和state的赋值等

1.1.2 监听props变更 - getDerivedStateFromProps()

• 前置:state依赖于props
• 主要用于当props的值变更时有机会同步state
• 在 react 16.3版本时增加的。
• 目的在于替换掉不推荐的 componentWillReceiveProps 方法
• 注意:这是一个纯函数。
• 返回值:props值有变化的时候返回1个对象，否则返回null

1.1.3 dom渲染函数 - render()

• 主要用于在改函数的return中返回用于构建组件界面的jsx代码进行界面渲染
• 注意:这是一个纯函数

1.1.4 组件装载完毕函数 - componentDidMount()

• 主要用于对dom进行操作，因为此时组件已经装载，dom可以获取到

1.2 更新 - Updating

当更新react组件的时候，有 5个 生命周期方法可以在dom装载组件之前调用。

• 1.2.1 监听props变更 - getDerivedStateFromProps()
• 1.2.2 组件更新 - shouldComponentUpdate()
• 1.2.3 dom渲染函数 - render()
• 1.2.4 更新前状态获取 - getSnapshotBeforeUpdate()
• 1.2.5 组件更新完毕函数 - componentDidUpdate()

1.2.1 监听props变更 - getDerivedStateFromProps()

同 1.1.2

1.2.2 组件更新 - shouldComponentUpdate()

• 返回值为boolean类型，true或者false
• 默认值为true，会进行重绘
• 当重绘比较影响性能的时候，或者想更多控制的时候，可以将返回值改为false
• 实际开发还没用到过
• TODO:待做相关demo

1.2.3 dom渲染函数 - render()

同 1.1.3

1.2.4 更新前状态获取 - getSnapshotBeforeUpdate()

• 主要用于获取前一次渲染和当前渲染的props和state
• 感觉跟 监听props变更 的 getDerivedStateFromProps 有点像
• TODO:待做相关demo，并且明晰和 监听props变更 的区别

1.2.5 组件更新完毕函数 - componentDidUpdate()

• 主要用于DOM更新完成后时调用。
• 当dom发生变化之后时，可以执行一些第三方API，或者其他处理

1.3 卸载 - Unmounting

在卸载阶段，有 1个 声明周期函数可用

• 1.3.1 卸载组件 componentWillUnmount()

1.3.1 卸载组件 componentWillUnmount()

• 当组件从DOM中移除的时候被调用
• 主要用于执行一些清除，重置工作

2. 一些建议

• 在 react 16.3 之后，有3个生命周期函数不在被推荐使用，建议改用其他生命周期函数。
• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

3. 参考

• react-handbook.pdf