react 生命周期

Posted 2020-12-11 bysee1423

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