1: vue生命周期钩子函数
开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程
create beforeCreate事件配置之前用 created 数据的操作 创建数据完后之后调用
mount beforeMount 挂载之前调用 mounted 视图 挂载到实例之后使用dom 操作
update beforeUpdate 数据更新时调用 updated 变化检测更改之后
destory beforeDestroy 实例销毁之前调用 destroyed 销毁之后调用
2:react生命周期钩子函数
声明周期三个阶段 9个生命周期钩子函数 10
- 操作 mount 挂载
1.constructor( ){ } 接收props 实现继承super(props) 定义状态/数据
- componentWillMount( ){ } 首次渲染之前调用
componentDidMount( ){ } 首次真实的DOM渲染后调用(仅此一次) 数据的请求 , 类似于vue的 created - render( ){ return ( ) } 在这里书写页面展示的标签(渲染)
-
更新 update 存在期
- render函数
- componentWillReceiveProps 组件将要接收输入属性 父组件更新子组件props时,调用 next.props 下一个属性
- shouldComponentUpdate 组件内容变化检测 是否更新组件默认返回true。当返回false时,后期函数就不会调用,组件不会在次渲染 next.props
next.state 下一个状态 - componentWillUpdate 组件将要更新 -- 更新之前 props和state改变后必调用
- componentDidUpdate 组价更新之后 真实dom成功后调用,访问真实dom时
-
销毁 unmount
- componentWillUnmount 组件销毁 使用完后必须销毁
eg:在组件中使用了setInterval,那我们就需要在这个方法中调用clearTimeout。
- componentWillUnmount 组件销毁 使用完后必须销毁