一、组件生命周期

A.创建期的生命周期

react	Vue	小程序	说明
	beforeCreate		实例化this之前
constructor	写在模板中	写在模版中	初始化
	created	created	实例化this之后
componentWillMount(旧) <br> getDerivedStateFromProps(新)	beforeMount	attached	渲染前执行。
render	对应component	对应component	渲染时执行。渲染方法
componentDidMount	Mounted	ready	渲染后执行。

说明：

1. componentWillMount、beforeMount、attached渲染前执行，可以用于渲染前的修改(同步数据)，并且不会触发重渲染。很少用到
2. 在react中，因为componentWillMount作用不大，为了将逻辑分的更清楚，用getDerivedStateFromProps替代，用于props来更新state
3. 组件实例化后和接受新属性时将会调用getDerivedStateFromProps。它应该返回一个对象来更新状态，或者返回null来表明新属性不需要更新任何状态

发送请求:

1. react在constructor阶段发送请求
2. Vue、小程序在created阶段发送请求，Vue如果获取的数据与修改data无关(beforeCreate最好不要改动data里的数据，否则可能会出现无法监听的情况)，则可以在beforeCreate阶段发送请求

对比下来：

基本一样，react采用JSX系统，声明式[手动挡(用的好会比自动挡要好)]，封装在函数/类中
Vue、小程序采用模板系统，响应式[自动挡(优雅)]，区分比较清楚

B.生存期的生命周期（更新）

1.props改变-->state/data改变

react	Vue	小程序	说明
getDerivedStateFromProps	自动挡(组件依赖)	自动挡(组件依赖)	父类props改变时触发

说明：
receive | 英[rɪˈsi:v]| 收到; 接待; 接到; 接纳;

1. react，父状态改变，全部子组件都会重新渲染：即都会触发getDerivedStateFromProps(nextProps, prevState)
2. 这个生命周期就是根据props来更新state
3. 这个是一个静态方法：不能访问实例属性方法：规范不操作其它操作
4. 官网API
5. 其它博客

对比：

1. react手动挡，根据props手动判断要不要触发重渲染
2. vue、小程序自动挡，会缓存组件依赖，从而判断要不要渲染该子组件

2.state/data改变

react	Vue	小程序	说明
shouldComponentUpdate	自动优化		通过返回 false来阻止组件的重新渲染
componentWillUpdate	beforeUpdate		更新前执行，用于最后打补丁及操作更新前的DOM
render	无对应方法。对应component	无对应方法。对应component	渲染时执行
componentDidUpdate	updated		更新后执行

说明

1. react，父状态改变，全部子组件都会重新渲染：可以通过shouldComponentUpdate来优化
2. Vue，在渲染过程中，会跟踪每个组件的依赖关系，不需要重新渲染整个组件树：自动优化

3.再次打开(复用情况)

react	Vue	小程序	说明
	activated		keep-alive组件再次打开时，相当于小程序的show
	deactivated		keep-alive组件再次切换时，相当于小程序的hide

C.销毁期生命周期

react	Vue	小程序	说明
componentWillUnmount	beforeDestory		销毁前执行
	destoryed	detached	销毁后执行

总结：