constructor:(1次)
当前生命周期用来做组件的初始化,当输写当前生命周期时必须要写super函数,否则this的指向会发生错误。
当前生命周期可以用this.state来定义当前组件所需要的一些状态
当前生命周期特殊情况下是接收不到props的数据,如果想要接收到props的数据的话,需要在super和constructor中传递props这个参数
componentWillMount:挂载前 (1次) (17.0废除掉了)
当前生命周期可以接收到props传递过来的数据,可以将外部数据转换为内部数据.
在当前生命周期中尽量不要使用this.setState。因为当前生命周期执行完毕以后,下一个生命周期就是render函数
在当前生命周期中我们可以对this.state中的数据做初始化的最后一次修改
render: 渲染 (多次)
当前生命周期的作用是将数据与虚拟DOM进行相结合,进行数据的渲染。render在第一次执行完毕以后会将渲染的结果在内存中保留一份
当render函数第二次执行的时候,会与内存中的虚拟DOM进行对比,这种对比方式叫做diff算法(diff算法:新旧两个虚拟DOM的对比就是diff算法)
componentDidMount:挂载后(1次)
当前生命周期可以获取到真实的DOM结构,一般情况下我们可以在当前生命周期中进行ajax的数据请求 || 进行方法的实例化
如何获取到真实的DOM结构?
1、this.refs.属性
2、
<元素 ref={(形参)=>this.属性 = 形参}></元素>
这里面的形参代表的是当前的DOM元素
使用: this.属性
componentWillUnmount:卸载 (1次)
当前生命周期的作用用来做事件的解绑 / 事件的移除 等操作
componentWillReceiveProps:(多次) (17.0废除掉了)
当props的数据发生改变的时候当前生命周期就会执行,当前生命周期中有一个参数就是新的props,在当前生命周期中可以用来检测外部数据的更新
shouldComponentUpdate:(多次)
1、当state||props中的数据发生改变的时候会执行当前生命周期,当前生命周期必须要返回一个布尔值,当返回true的时候会执行下面的生命周期,如果返回false则下面的生命周期不会执行(render函数不会执行),
2、当前生命周期中会有2(3)个参数 一个是新的props 一个是新的state。我们可以通过新的props || state 与 旧的props和state进行对比,来进行性能优化
3、当前生命周期决定的是render函数是否渲染,而不是数据是否更新,哪怕返回值是false 数据其实也会进行更新的
4、千万不要在这里面执行this.setState否则会造成死循环
componentWillUpdate:(多次) (17.0废除掉了)
当前生命周期可以用来做更新数据的最后一次修改
当前生命周期中有2个参数一个是新的props 一个是新的state 我们可以通过新的props || 新的state来做数据最后的一次更改
componentDidUpdate:(多次)
当期生命周期可以获取到数据更新后最新的DOM结构
当前生命周期数据与模板已经进行相结合,生成最新的DOM结构了
注意:如果我们在当前生命周期中做一些实例化的时候 一定要加判断
当前生命周期也有2个参数 一个是旧的props 一个是旧的state