每个组件都会有一个叫生命周期,就是例如一个人会有出生前,出生后,婴儿时代,幼儿时代,青年时代,成年时代,类似这种意思吧,为啥要有这个东西呢?因为你要控制一个组件在不同时期做不同的事情啊,例如婴儿时代要哭哭和喝奶,成年时代要赚钱,控制好每个生命周期该做的事情,才能把一个个组件管理好.
生命周期的话,一开始都是稍微了解一下,重点要知道一些常用的就好
image.png
这是官网上面常用的一些生命周期.
constructor
构造函数,一般用于React组件的构造函数在装载之前被调用 主要两个作用:
1.可以用于初始化state,也只能在这个生命周期里面初始化state,其他生命周期要更改state都只能调用setState了
2.可以把方法绑定到实力对象上
官网有一句说,如果不初始化state也不绑定方法,可以不执行,执行就一定要super,这个在上一章就讲到了.
constructor(props) {
super(props)
this.state = {
num:10 //初始化state
}
this.addNum = this.addNum.bind(this) //方法绑定到实例上
}
注意:
constructor(props) {
super(props);
// Don't do this!
this.state = { color: props.color };
}
这样prop更新是不会触发组件内数据更新的,要触发更新可以直接引用prop,
还有把方法绑定到实例上有两种方式:
- 在constructor里面通过bind绑定
- 就是直接在onClick类似的触发函数里面通过匿名函数绑定
例如
return (
<div className="App">
<button onClick={()=>{this.addNum()}}>++</button>
<Num num={this.state.num}></Num>
{this.state.num}
</div>
);
这样虽然用起来很方便,但是并不值得提倡,因为每次渲染都会创展一个新的方法对象,可能会引发不必要的重新渲染
componentDidMount
这里是组件要插入到节点树后调用,就是dom节点都已经生成了,一般用于获取dom节点,或者是一些网络数据请求,都可以放在这里面,会再次触发render函数.并且componentDidMount是页面上所有组件都render之后才会调用,并不是render后立即调用的,
componentDidUpdate
数据更新之后立即调用,初次渲染并不会调用这个函数,用于组件更新后操作dom节点,也可以用于请求网络数据
componentDidUpdate(prevProps, prevState, snapshot)
会有3个参数
