React学习---生命周期函数（旧）

一.生命周期函数

名字：生命周期函数 = 生命周期钩子 = 生命周期回调函数 = 生命周期钩子函数

• componentDidMount 组件完成挂载时React调用
• componentWillUnmount 组件将要卸载时React调用
• render

<div id="test"></div>
<script type="text/babel">
	state = {opacity:1}
	death = () => {
		// 卸载组件
		ReactDOM.unmountComponentAtNode(document.getElementById('test'))
	} 

	//组件完成挂载
	componentDidMount(){
		this.timer = setInterval(() => {
			// 读取原状态
			let {opacity} = this.state
			opacity -= 0.1
			if(opacity <= 0) opacity = 1
			//设置新的透明度
			this.setState({opacity}) // 增强写法
		},200)
	} 

	// 组件将要卸载
	componentWillUnmount(){
		//清除定时器
		clearInterval(this.timer)
	}
	
	render(){
		return(
		<div>
			<h2 style={{opacity:this.state.opacity}}>React生命周期</h2>
			<button onClick={this.death}>不活了</button>
		</div>
		)
	}
</script>

render的调用时机：初始化渲染，状态更新时

二.生命周期（旧）—— 组件挂载流程

1. constructor
2. componentWillMount 组件将要挂载钩子
3. render 组件挂载钩子
4. componentDidMount 组件挂载完成钩子

三.生命周期（旧）—— setState流程

1. shouldComponentUpdate : 更新状态的“阀门”。
   如果不写，底层也会补上这个钩子，并且默认返回值为true。如果手动写了这个钩子，则必须写return返回值，返回值必须是布尔值。
2. componentWillUpdate : 组件将要更新的钩子
3. render ： 组件更新
4. componentDidUpdate : 组件完成更新的钩子

四.生命周期（旧）—— forceUpdate流程

不更改任何状态中的数据，强制更新一下

1. componentWillUpdate : 组件将要更新的钩子
2. render ：组件更新钩子
3. componentDidUpdate : 组件完成更新的钩子

五.生命周期（旧）—— 父组件render流程

父子组件之间的props

A组件里的内容在B组件里展示
// 父组件A
class A extends React.Component{
	state = {carName:'奥迪'}
	changeCar = () => {
		this.setState({carName:'奥拓'})
	}
	render(){
		return(
			<div>
				<div>我是A组件</div>
				<button onClick={this.changeCar}>换车</button>
				<B carName={this.state.carName}/>
			</div>
		)
	}
}
//子组件B
class B extends React.Component{
	// 组件将要接收新的props
	componentWillReceiveProps(){
		console.log('B---componentWillReceiveProps')
	}
	render(){
		return(
			<div>我是B组件，接收到的车是{this.props.carName}</div>
		)
	}
}

1. componentWillReceiveProps : 组件将要接收新的props的钩子
   注意：第一次传的时候不会执行，之后传的才会执行
2. shouldComponentUpdate : 组件是否更新的“闸门”
3. componentWillUpdate
4. render
5. componentDidUpdate

六.总结

1. 初始化阶段：由ReactDOM.render()触发—初次渲染
   (1) constructor()
   (2) componentWillMount()
   (3) render()
   (4) componentDidMount() ===> 常用，一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、开启订阅
2. 更新阶段，由组件内部this.setState()或父组件调用render触发
   (1) shouldComponentUpdate()
   (2) componentWillUpdate()
   (3) render() ===> 必须使用一个
   (4) componentDidUpdate()
3. 卸载组件，由ReactDOM.unmountComponentAtNode()触发
   (1) componentWillUnmount() ===> 常用，一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息