React基础之 组件生命周期
constructor
- 用于初始化内部状态,很少使用
- 唯一可以直接修改state的地方
getDerivedStateFromProps (react 16.3)
- 当state需要从props初始化时,使用
- 尽量不要使用,维护两者状态一致性会增加复杂度
- 每次render都会调用
运用场景:表单控件获取默认值
componentDidMount
- ui渲染完之后调用
- 只执行一次
运用场景:获取外部资源
componentWillUnmount
- 组件移除时被调用
运用场景:资源释放
getSnapshotBeforeUpdate (react 16.3)
- 在页面render之前调用,state已跟新
运用场景:获取render之前的dom状态
getSnapshotBeforeUpdate()在最新的渲染输出提交给DOM前将会立即调用。它让你的组件能在当前的值可能要改变前获得它们。这一生命周期返回的任何值将会作为参数被传递给componentDidUpdate()。
componentDidUpdate
- 每次UI跟新时被调用
运用场景:页面需要根据props变化重新获取数据
shouldComponentUpdate
- 决定 Virtual Dom是否要重绘
- 一般不需要手动调用,可以使用 PureComponent 自动实现
运用场景:性能优化
原文: