React生命周期函数

定义

生命周期函数：生命周期函数指的是组件在某一时刻会自动执行的函数

React生命周期函数：在React中,生命周期函数指的是组件在某一时刻会自动执行的函数

React生命周期

基本上可以分为以下几个周期

• Initialization：组件初始化过程
• Mounting：页面挂载过程
• Updating：更新过程
• Unmounting：卸载过程

React生命周期函数有哪些

挂载：
1.constructor():在初始化页面的过程中调用

constructor(props) {
	//...
}

2.componentWillMount()：在组件已经被渲染到 DOM 前后运行

// 挂在前自动执行
	componentWillMount() {
		console.log('componentWillMount');
	}

3.render()：必须的钩子函数，不应该改变组件的状态

// 渲染时自动执行
	render() {
		console.log('render')
	}

4.componentDidMount()：在组件已经被渲染到 DOM 中后运行

// 挂在后自动执行
	componentDidMount() {
		console.log('componentDidMount');
	}

组件更新：
1.componentDidMount()：挂载了的组件接收到新属性前调用。

// 挂在后自动执行
	componentDidMount() {
		console.log('componentDidMount');
	}

2.shouldComponentUpdate()：在挂载了的组件属性变化和状态变化时调用，通过控制返回的boolean值告诉React是否重新渲染该组件。

// 组件更新前 前自动执行
	shouldComponentUpdate() {
		console.log('shouldComponentUpdate');
		return true;
	}

3.shouldComponentUpdate()：接收到新属性或状态时在渲染shouldComponentUpdate后调用

// 组件更新前 shouldComponentUpdate之后 自动执行
	componentWillUpdate() {
		console.log('componentWillUpdate');
	}

4.componentDidUpdate():在更新发生后立即被调用

// 组件更新前 render 自动执行
	componentDidUpdate() {
		console.log('componentDidUpdate');
	}

卸载：
1.componentWillUnmount()：在组件从 DOM 中移除之前立刻被调用

// 组件从页面中移除前自动执行
	componentWillUnmount() {
		console.log('componentWillUnmount');
	}