React系统学习5(组件生命周期)

在之前的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就理解为是挂载,那么与之对应的就有另外两个生命周期函数,componentWillMountcomponentDidMount

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

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

render

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

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

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

componentWillUpdate和componentDidUpdate

说到状态修改时触发render,自然就引出另两个生命周期函数,即componentWillUpdatecomponentDidUpdate

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

很显然,就是当修改类的render触发时,在它之前和之后会分别触发componentWillUpdatecomponentDidUpdate

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

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

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

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

shouldComponentUpdate

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

其实不是的。

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

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

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

如果说,setStaterender的过程是shouldComponentUpdate->componentWillUpdate->render,那么forceUpdate的过程就是只有componentWillUpdate->render

componentWillReceiveProps

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

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

例如有下边这段代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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'))

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

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

超级飞侠之间切换。

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

推荐文章