react生命周期

发表于 | 分类于


四个阶段

1、Initialization:初始化阶段。2、Mounting: 挂载阶段。3、Updation: 更新阶段。4、Unmounting: 销毁阶段

Initialization:初始化阶段

constructor: 定义属性（props）和状态(state)。因为constructor是构造函数，所以不能认为是生命周期函数。但是可以个人认为

Mounting: 挂载阶段
1
2
3
4
5
// 只有在初始化页面挂载时才会触发
componentWillMount : 在组件即将被挂载到页面的时刻执行。
render : 页面state或props发生变化时执行。
componentDidMount : 组件挂载完成时被执行。
// 注意：componentWillMount和componentDidMount这两个生命周期函数，只在页面刷新时执行一次，而render函数是只要有state和props变化就会执行，这个初学者一定要注意。
Updation: 更新阶段
1
2
3
4
5
6
7
8
9
10
// 当props属性或state状态改变时，都会触发
shouldComponentUpdate(){ // 是否更新
  console.log('shouldComponentUpdate---组件发生改变前执行')
  return true // 只有return true，才会更新组件
}
componentWillUpdate：在组件更新之前，但shouldComponenUpdate之后被执行
render： 更新组件
componentDidUpdate：组件更新之后执行

componentWillReceiveProps: 子组件接收了props，这时候函数就可以被执行了，但是第一次渲染组件的时候不会执行
Unmounting: 销毁阶段
1
componentWillUnmount: 组件将从页面中删除的时候执行