Vue与React Natice生命周期简述

Vue 生命周期

u=3942278502,2357480570&fm=173&app=25&f=JPEG.jpeg

1.beforeCreate(初始化前)

2.created(初始化完毕)

3.activated(类似iOS的viewDidappear)

4.deactivated（类似iOS的ViewDidDisappear）

3.beforeMounted（对象在DOM中适合形状）

4.mounted（DOM已准备就绪并放置在页面内）

5.beforeUpdate（更改已完成，但尚未准备好更新DOM）

6.updated（在DOM中呈现的更改）

7.beforeDestroy（对象准备死掉）

8.destroyed（对象停止并从内存中删除）

ReactNative 生命周期

757139-20190214142433730-707828579.png

一、Mounting（创建）

1.constructor（构建函数 返回state的初始值）

2.componentWillMount（组件将要被加载到视图之前调用）

3.render（组件渲染函数，会返回一个Virtual DOM，只允许返回一个最外层容器组件）

4.componentDidMount（在调用了render方法，组件加载成功并被成功渲染出来之后，所要执行的后续操作，一般都会在这个函数中进行，比如经常要面对的网络请求等加载数据操作）

注： 因为UI在componentDidMount已经成功渲染，而且这里面是异步的，所以放在这个函数进行数据的请求等复杂的操作，不会出现UI错误

二、Updating（更新）

1.componentWillReceiveProps（指父元素对组件的props或state进行了修改）

2.shouldComponentUpdate ？ （一般用于优化，可以返回false或true来控制是否进行渲染(true 的话进行下2步操作，false不会进行下去）

3.componentWillUpdate（组件刷新前调用）

4.render

5.componentDidUpdate（更新后）

三、Unmounting（销毁）

1.componentWillUnmount（用于清理一些无用的内容，比如：定时器清除）