- 生命周期对比表
阶段 | React16.8以前的生命周期钩子函数 | React18 | Vue | Vue的自定义指令 |
---|---|---|---|---|
初始 | getDefaultProps 设置默认的propsgetInitialState 在使用es6的class语法时是没有这个钩子函数的,可以直接在constructor中定义this.state。此时可以访问this.propscomponentWillMount 组件渲染前被调用render 渲染模板componentDidMount 组件挂载成功,第一次渲染后调用,组件已经发生在对应的DOM结构,通过this.getDOMNode()或获取节点,可以在这个周期时获取服务端数据,redux模式在这里绑定数据 | constructor static getDerivedStateFromProps (纯函数,静态方法) render componentDidMount | beforeCreate 实例初始化之后,数据观察data observer和event/watch事件配置之前被调用created (实例创建完成后立即被调用,实例已完成如下配置:数据观察data observer,属性和方法的运算,event/watch回调。$el属性不可见)beforeMount 挂载之前被调用,render函数首次被调用(服务端渲染期不被调用)mounted 不会承诺所有的子组件都一起被挂载 | bind :绑定时,自定义指令绑定于相应dom时执行inserted :指令所在dom添加到父节点时执行,渲染时 |
更新 | componentWillReceiveProps 组件接收到一个新的prop时被调用shouldComponentUpdate 返回一个布尔值,组件收到新的或state时被调用,常用于优化组件,减少渲染次数componentWillUpdate 接收到新的props或者state但还没render时调用render componentDidUpdate 组件更新完后调用 | static getDerivedStateFromProps shouldComponentUpdate render getSnapshotBeforeUpdate componentDidUpdate | beforeUpdate 数据更新时调用,发生虚拟dom打补丁之前,适合更新之前访问现有的domupdated 更新完后,组件DOm更新完毕,可以执行依赖于DOM的操作 | update :更新时,不保证更新完成(指令所在组件有更新时执行),不保证该更新和当前指令所在dom有关 componentUpdated :更新完成时,指令所在组件更新完成 |
卸载 | componentWillUnmount 从dom中移除时立即被调用 | componentWillUnmount | beforeDestory 实例销毁时调用,实例仍然可用destroyed 销毁实例后调用,与实例相关的所有都会被移动 | unbind :解除绑定,类似于beforeDestroy |