生命周期 Vue&&React

今天说一下生命周期 vue和react

生命周期是很重要的 也是我们因该具备的

React生命周期

一:创建阶段

constructor//这里是初始化函数，设置组件的初始化状态，state执行一次，
componentWillMount//组件将要被创建执行一次
render//组件将要被执行多次
componentDidMount//组件创建成功//执行一次
componentWillReceiveProps(新的props)//这个是当props更新时触发

二:生长阶段

shouldComponentUpdate//在这里可以控制组件是否被更新，它接收两个参数，一个最新的props一个最新的state,而且必须有返回布尔类型的值，返回true则更新组件返回false则不更新
componentWillUpdate//组件将要被更新，它和那个shouldComponentUpdate一样也是接收两个参数
render//为什么在这里又再次提了一遍render呢，因为我们上面所有render会被执行多次，就是每次执行完 componentWillUpdate以后就会去执行一遍render
componentDidUpdate//组件更新完成，接受两个参数，一个是上一次的props一个是上一次的state

三:卸载阶段

componentWillUnmount//卸载组件

接下来说下vue的生命周期

Vue的生命周期

beforeCreated(创建前)：实例组件刚创建
create(创建)：数据data已经初始化完成，但是DOM未渲染，我感觉这里更适合请求数据，因为用户不想看到空页面
beforeMount:Dom未完成挂载，数据也初始化完成，但是数据的双向绑定还是显示 {{ }}， 这里是因为Vue采用了Virtual DOM(虚拟DOM)技术。
mounted:数据和模板已经结合，在这个生命周期函数中，我们可以通过this.$refs值访问到真实的dom结构
beforeUpdate：只要页面数据触更新都会去触发，数据更新之前所做的一些操作
updated:只要页面数据更新都会去触发，更新后
befoDestory (销毁前)
1.在这个生命周期中，还是可以继续访问到真实的dom结构以及data中的数据
2.一般我们都会在这个生命周期函数中，去做一些事件解绑/移除的操作
destroyed(销毁后)
1.将dom与数据之间的关联进行断开
2.在当前生命周期函数中是访问不到真实的dom结构的