生命周期
任何事物都不会凭空产生,也不会无故消亡。一个事物从产生到消亡经理的各个阶段,我们称之为 生命周期。
具体到我们的前端组件上来,一个组件的生命周期可以大体分为创建、更新、销毁这个三个阶段。
本文主要介绍React 的组件生命周期,并以最新发布的v16为分水岭,介绍前后生命周期函数的变化。
组件生命周期
在React代码里,我们通常通过继承React.Component这个抽象基础类来定义一个有生命周期函数的组件(函数式生命无法自定义生命周期函数),react官方将其生命周期分为以下三个阶段:
装载
这个阶段是指组件初始化并插入DOM中,主要包含以下函数:
constructor()
static getDerivedStateFromProps()
componentWillMount() / UNSAFE_componentWillMount()
render()
componentDidMount()
更新
当组件状态发生变化时,会触发一次更新
componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()
static getDerivedStateFromProps()
shouldComponentUpdate()
componentWillUpdate() / UNSAFE_componentWillUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
销毁
当组件从DOM中移除时,启动销毁:
componentWillUnmount()
具体如下图:
如上图所示,绿色背景为v16版本新增的生命周期函数,黄色背景的的为v16版本建议弃用,并在后续版本中会删除的生命周期函数。
其中getDerivedStateFromProps是一个静态函数,用来替换原来的componentWillMount函数,可以在这个静态函数中将props里的属性添加到state中去,这里应该是一个纯函数。
getSnapshotBeforeUpdate用来做一些必须要修改真实DOM的操作,虽然不建议这么做。
One more thing
React 同时提供一个componentDidCatch函数,来表明当前组件是一个边界错误处理组件,具体可以参考错误边界