概述

组件的生命周期：组件从创建到挂载到页面中运行，再到组件卸载的过程。

只有类组件才有生命周期。

生命周期的每个阶段都伴随着一些调用方法，这些方法称为生命周期的钩子函数。钩子函数的作用是为开发人员在不同阶段操作组件提供了时机。

生命周期的三个阶段

1、创建时

执行时机：组件创建时（页面加载时）

执行顺序：

constructor() ---> render() ---> componentDidMount()

import React from 'react'
import ReactDOM from 'react-dom'

// 组件的生命周期
class App extends  React.Component {
	constructor(props) {
		super(props)
		
		// 初始化state
		this.state = {
			count: 0
		}
		
		console.log('1 钩子函数 ， constructor')
	}
	
	componentDidMount() {
		console.log('3 钩子函数 ， componentDidMount')
		
		// 渲染完成之后可以进行DOM操作
		const title = document.getElementById('title')
		console.log(title)
		// 可以发送网络请求，如ajax
	}
	
	render(){
		console.log('2 钩子函数 ， render')
		// 不能这里调用setState()，会导致地柜循环，因为setState()会触发刷新
		return(
			<div>
				<h1 id="title">统计点击次数：</h1>
				<button id="bt">点击我</button> 
			</div>
		)
	}
}
ReactDom.render(<App />，document.getElementByid('root'))

2、更新时

执行时机：1.setState() 2.forceUpdate() 3.组件接收到新的props

说明：以上三者任意其一变化，组件都会重新渲染

执行顺序：

render() -------> componentDidUpdate()

import React from 'react'
import ReactDOM from 'react-dom'

// 组件的生命周期
class App extends  React.Component {
	constructor(props) {
		super(props)
		
		// 初始化state
		this.state = {
			count: 0
		}
	}
	// 点击
	handleClick = () => {
		// 1、调用setState会触发渲染
		this.setState({
			count: this.state.count + 1
		})
	}
	// 和上面的handleClick，互相注释进行测试看效果
	/*
	handleClick = () => {
		// 3 触发渲染
		this.forceUpdate()
	}
	*/
	render(){
		console.log('钩子函数 ， render')
		return(
			<div>
				<Counter count = {this.state.count}/>
				<button onClick={this.handleClick}>点击我</button> 
			</div>
		)
	}
}

// 统计点击次数
class Counter extends React.Component {
	render() {
		// 2 组件接受到新属性是会触发渲染
	    console.log('子组件-----钩子函数 ， render')
		return <h1>统计点击次数: {this.props.count}</h1>
	}
	// 注意：如果要调用setState()更新状态，必须放入一个if中。
	// 直接调用，会导致递归更新
	componentDidUpdate(prevProps) {
		console.log('子组件-----钩子函数 ， componentDidUpdate')
		console.log('上一次的props：', prevProps, ', 当前的pros：', this.props)
		// 正确使用方式：比较更新前后的props是否相同，来决定是否重新渲染组件
		if (prevProps.count !== this.props.count) {
			this.setState({})
			// 可以发送ajax请求了
		}
	}
}

ReactDom.render(<App />，document.getElementByid('root'))

3、卸载时

执行时机：组件从页面中消失

import React from 'react'
import ReactDOM from 'react-dom'

// 组件的生命周期
class App extends  React.Component {
	constructor(props) {
		super(props)
		
		// 初始化state
		this.state = {
			count: 0
		}
	}
	// 点击
	handleClick = () => {
		// 1、调用setState会触发渲染
		this.setState({
			count: this.state.count + 1
		})
	}

	render(){
		console.log('钩子函数 ， render')
		return(
			<div>
				{
					this.state.count > 5 ?(
					 <p>统计结束</p>
					 ) : (
					 <Counter count = {this.state.count}/>
					 )
				}
				
				<button onClick={this.handleClick}>点击我</button> 
			</div>
		)
	}
}

// 统计点击次数
class Counter extends React.Component {
	componentDidMount() {
		// 开启定时器
		this.timerId = setInterval(() => {
			console.log('定时器1秒执行一次')
		}, 1000)
	}

	render() {
	    console.log('子组件-----钩子函数 ， render')
		return <h1>统计点击次数: {this.props.count}</h1>
	}
	componentDidUnmount(){
		console.log('子组件-----钩子函数 ， componentDidUnmount')
		console.log('子组件-----我被卸载了')
		
		// 清理定时器
		clearInterval(this.timerId)
	}
}

ReactDom.render(<App />，document.getElementByid('root'))

4、不常用的钩子函数大全

关于shouldComponentUpdate怎么使用，请看 《避免不必要的重新渲染》

--------------------------------

锦瑟无端五十弦，一弦一柱思华年。
庄生晓梦迷蝴蝶，望帝春心托杜鹃。
沧海月明珠有泪，蓝田日暖玉生烟。
此情可待成追忆，只是当时已惘然。

---------- 锦瑟 [作者] 李商隐 [朝代] 唐