React系统学习5（组件生命周期）

Posted 2022-04-28 程序员涂小哥

在之前的React类式组件定义的时候，有说到有一个必不可少的内容，即render函数，这个函数是React自带的，每当组件的状态变化的时候，就会触发一次render。

render函数就是React生命周期中的一个，与之类似的这些函数通常被称作React生命周期函数、React生命周期钩子函数、React生命周期钩子、React生命周期回调函数。

这些函数包括constructor、componentWillMount、render、componentDidMount、componentWillUnmount、componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、componentDidUpdate等。

constructor

constructor函数比较好理解，就是构造函数，也就是在组件被创建的一开始就调用。

在之前的内容中有说过，多数时候构造函数都是可以省略的。

但是需要注意的是，如果没有省略构造函数，那么构造函数中必须调用super函数，同时，根据React官网的说明，规范的构造函数需要写props参数，并将props传给super，否则的话可能导致一些问题。

componentWillMount和componentDidMount

之前在说虚拟DOM转换为真实DOM时，一直说的是渲染，实际上还有一个说法，是叫做挂载，英文单词也就是mount。

所以实际上，也可以把初次render就理解为是挂载，那么与之对应的就有另外两个生命周期函数，componentWillMount和componentDidMount。

这两个函数从命名就比较好理解，will是将要，did是完成，也就是说componentWillMount指的是组件将要挂载前，componentDidMount指组件完成挂载后。

说的再直白一点，就是componentWillMount在初次render之前调用，componentDidMount在初次render之后调用。

render

render是必不可少的一个生命周期函数，上边也说初次render的时候就可以先理解为挂载。

但是为什么说初次呢，是因为挂载只有一次，而render却是1+n次，只有第一次的时候可以简单理解为挂载。

除了刚开始加载的时候会调用，后边每次状态修改也都会触发render。

componentWillUpdate和componentDidUpdate

说到状态修改时触发render，自然就引出另两个生命周期函数，即componentWillUpdate和componentDidUpdate。

同样的，从命名就能比较容易理解作用，即组件将要修改前调用、组件修改后调用。

很显然，就是当修改类的render触发时，在它之前和之后会分别触发componentWillUpdate和componentDidUpdate。

只是，这里少有一点问题，也就是说这个所谓的修改类操作，并不是真的一定是状态发生了修改。

状态发生修改这个可能比较好理解，因为在说state的时候说过了，实际上指的就是setState操作。

但是除了这个操作会触发修改类的render外，还有一个操作也可以，那就是forceUpdate。

他们的一个区别，就涉及到下一个生命周期函数。

shouldComponentUpdate

我们说setState操作会引发状态的修改，但是状态修改了就一定会触发render吗？

其实不是的。

因为在setState和render之前还有一个shouldComponentUpdate，这个函数的作用说白了就是决定在setState之后是否要进行render，也就是一个开关。

在这个函数中，需要一个boolean类型的返回值，默认情况下返回true，这也就是为什么之前只要setState就一定会render的原因。

setState了不一定会render，同样的，render也不是必须要setState，当执行了forceUpdate后，也会触发render。

如果说，setState到render的过程是shouldComponentUpdate->componentWillUpdate->render，那么forceUpdate的过程就是只有componentWillUpdate->render。

componentWillReceiveProps

上边几个声明周期函数都说完后，就剩componentWillReceiveProps这一个了。

这个函数只有在父子组件关系中，且父组件第二次给子组件传递数据的时候才会触发。

例如有下边这段代码：

class Parent extends React.Component
	state=gift:"奥特曼"

	changeGift=()=>
		let gift=this.state
		if(gift === '奥特曼')
			this.setState(gift:'超级飞侠')
		else
			this.setState(gift:'奥特曼')
		
	

	render() 
		let gift=this.state
		return (
			
			<div>
				<h2>父组件</h2>&nbsp;<button onClick=this.changeGift>点击换个礼物</button>
				<Son gift=gift></Son>
			</div>
		)
	


class Son extends React.Component

	componentWillReceiveProps()
		console.log("看下是什么礼物")
	
	render()
		return (
			<h3>this.props.gift</h3>
		)
	


ReactDOM.render(<Parent />,document.getElementById('test'))

这段代码的意思是，有一个父组件，里边有一个按钮和一个子组件，父组件会给子组件传递一个礼物的数据，并且在点击按钮时修改传递的数据。

那么浏览器访问就会看到，一开始就会显示出奥特曼，当点击按钮的时候会在奥特曼和

超级飞侠之间切换。

如果打开浏览器控制台，就会进一步看到，当第一次访问的时候，并没有任何的输出内容，但是当点击按钮的时候，就会输出如下的内容：