react生命周期

327 阅读1分钟

上图具体解释

constructor

1,用于初始化内部状态,很少使用

2,唯一可以直接修改state的地方

getDerivedstateFromProps

如果state需要从props获得,一般来说都可以通过props动态计算获得他,而不需要单独存储这个状态,一旦单独存储就要维护两者的一致性,这样就会正价复杂性。

1,当state需要从props初始化时使用

2,尽量不要使用:维护两者状态一致性会增加复杂度

3,每次reder都会调用

4,典型场景:表单控件获取默认值

componentDidMOunt

1,ui渲染完成后调用

2,只执行一次

3,典型场景:获取外部资源

componentWillUnmount

1,组件移除时被调用

2,典型场景:资源释放

getSnapshotBeforeUpdate

1,在页面render之前调用,state已更新

2,典型场景:获取render之前的dom状态

componentDidUpdate

1,每次ui更新时被调用

2,典型场景:页面需要根据props变化重新获取数据

shouldComponentUpdate

1,决定virtual Dom是否要重绘

2,一般可以由PureComponent自动实现

3,典型场景:性能优化