深入浅出React和Redux(二) 组件生命周期

每个组件都会有一个叫生命周期,就是例如一个人会有出生前,出生后,婴儿时代,幼儿时代,青年时代,成年时代,类似这种意思吧,为啥要有这个东西呢?因为你要控制一个组件在不同时期做不同的事情啊,例如婴儿时代要哭哭和喝奶,成年时代要赚钱,控制好每个生命周期该做的事情,才能把一个个组件管理好.

生命周期的话,一开始都是稍微了解一下,重点要知道一些常用的就好

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,
还有把方法绑定到实例上有两种方式:

1. 在constructor里面通过bind绑定
2. 就是直接在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个参数