首页 > 其他 > 详细

React 渲染中 componentWillReceiveProps和 shouldComponentUpdate的关系

时间:2019-09-10 11:55:09      阅读:98      评论:0      收藏:0      [点我收藏+]

React生命周期渲染示意

子组件不添加props,父shouldComponentUpdate返回true时:

技术分享图片

 

子组件不添加props,父shouldComponentUpdate返回false时:

技术分享图片

 

子组件添加props,并且改变props值,父shouldComponentUpdate返回false时

技术分享图片

 

子组件添加props,并在父改变传值,并且子组件添加一个动态的key,父组件还是shouldComponentUpdate返回false:

技术分享图片

 

综上实验,暂时可以得出一个结论,shouldComponentUpdate是子组件重新渲染的阀门,可控制子组件更新和挂载。

继续,再考虑一种情况

给子组件添加一个动态的key,不传props,子组件不使用props,shouldComponentUpdate返回true:

技术分享图片

 

 

给子组件添加一个动态的key,并给子组件传props,shouldComponentUpdate返回true:

技术分享图片

 

综上所述,暂时还可以得出一个结论,子组件上动态的key,不管是否有传值变化都会触发组件的重新挂载。

 

继续进行试验,不考虑shouldComponentUpdate和动态key。

子组件上加props,并在子组件使用,值发生变化和不发生变化:

技术分享图片

 

子组件不添加props,不添加动态key,不调用shouldComponentUpdate函数:

技术分享图片

 

 

 

综上实验:

组件更新数据有两个情况:

1,更新父组件,子组件就会执行receiveProp和render不管是否有数据变化,不会重新挂载。

2,组件重新挂载,组件重新会执行一遍挂载的生命周期,挂载点组件发生变化。

组件是否更新,受到shouldComponentUpdate的判断控制:

1,组件是否有值变化

2,组件是否需要重新挂载

shouldComponentUpdate返回false时,都不会执行更新!!!

组件被当做子组件使用时,就会触发 componentWillReceiveProps () 周期函数。

 

另外,还有需要一组需要留意的生命周期函数 update

技术分享图片

 

 update是在render之前,mount是在之后,有dom结构才需要挂载。

技术分享图片

 

React 渲染中 componentWillReceiveProps和 shouldComponentUpdate的关系

原文:https://www.cnblogs.com/the-last/p/11495951.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!