react生命周期遇到的问题

问题描述:

 

现象：父组件（容器组件）把redux管理的值传给子组件（展现组件），在父组件的render中能读取到this.props.city.cityName的值，我想把这个值经过props传到子组件中，可是在子组件中

         render中能拿到所传的值，componentDidMount中却没获取到，初步估计是生命周期从新渲染方面的问题

 

　　　父组件

　　　　　　　　

 

 

　　　　子组件

　　　　 

 

　　　　显示

　　　　

 

 

开始分析：

　　

 

 

　　将装载阶段的生命周期函数都打印一遍，看看哪一个环节能获得值

 

　　结果发现：

　　　　

　　还真的是发生二次渲染，render在第二次得到到了数据，而componentDidMount在react组件整个生命周期只触发一次，恰好没机会看见render再一次获得值了，那么也难怪得不到值了

 

      那么又一个问题来了，通常状况，state发生改变会引发当前组件发生第二次渲染，这里并无显性的使用setState改变state，为何也发生了第二次渲染，呃....

 

　　带着问题再看一遍react生命周期图

 

　　                  

　　　发现最左边的状况，父组件更新，会引发组件的二次render，并也会触发当前组件的componenWillReceiveProps()函数

 

　　　写个demo，验证一下～，

 

　　　状况一：  通常状况

　　　       

 　　

　　　展现

　　   

　　　并无触发componenWillReceiveProps()函数

 

 

　　   状况二：此组件状况

　　　             

　　

　　　展现：

 　　  

 　　  上图的红框能够看出，的确是父级组件的更新致使了，如今这个子组件的二次渲染

 

　　   至于父级组件更新是怎样的状况，结合我以前看《深刻浅出React和Redux》写的博文总结：

　只要是父组件的render函数被调用，在render函数里面被渲染的子组件就会经历更新过程，

    无论父组件传给子组件的props有没有改变，都会触发子组件的componentWillReceiveProps函数

　　　

　　   那么再写个demo组件进行验证，加深一下记忆

　　    

 

　　    父级

 　　          引入了子组件

 

　　  子级

　　          

　　

　　效果

 　　

　

      结论：父级初始时调用了render，可是并无再次引发子组件的componentWillReceive触发，也就没有引发子组件第二次渲染

 

　　修改父组件代码，打开父组件setState注释，经过父组件的state改变，来引发第二次render

　　

 

　　取消注释，效果：

 

 　　

　　此时父级组件render以后立马，触发了子组件的componentWillReceive，并引发子组件第二次render

　　

　　 结论：父级从新调用render（再次重绘），会引发子组件的componentWillReceive触发

 

　题外总结：子组件自己的state改变或父级的二次渲染，都会引起子组件的二次渲染

　　　

 　  回归最原先的父子级组件，又产生了一个问题

 

　　什么状况致使父级组件进行第二次render，才致使了子组件二次渲染，才致使了我此次的这个问题，父组件代码以下

　　

　　展现：

　　

　　父级也被触发了componentWillReceiveProps，能够推想出祖父级发生了更新操做

 

　　那么又引起了一个思考，什么致使祖父级发生了更新操做，经过一个和此时shop组件同根同级别的组件（这个组件没有引入redux），显示那个并无触发componentWillReceiveProps这个函数推断，应该shop组件二次渲染可能与redux有关，再次验证一下：

 

　　注释了与引入redux相关的代码

　　

 　　

　　此时，没有触发父级和子级componentWillReceiveProps这个函数

　　

 

 　　暂时打住，不继续“细化”下去了

 

 

　　再作一个总结：

　　第一、引入redux的组件，会引发二次渲染，同时会触发当前组件的componentWillReceiveProps()函数；

 

　　第二、在父级组件(容器组件)引入了redux，经过props传值到子组件(展现组件)，由于父组件二次调用render会致使子组件二次调用render，结合下图，第一次父级的render也没取到值，显示的是undefined，第二次父级取到redux中的值就传到子组件，此时已经没componentDidMount的机会了，能够用componentDidUpdate取到

 

　　

 

　　第三、上图中，有个细节在这里也特地强调一下，子组件中componentWillReceiveProps，shouldComponentUpdate以及componentWillUpdate

显示的是undefined并无显示“杭州”

 

　　查看源代码，粗略一看，感受没问题

 

　　         

 

 

　　 结果就....................

 

       

 

 

 

 

　　可是这三个生命周期函数读取父级的props值比较特殊，他们从参数nextProps中读取，在这里须要修一下，才能够读取

 

 　　             

 

　　此时展现，父组件传递的值成功读取