最新公告  | 
  • CTRL + D 加入收藏不迷路哦!

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

P22:React高级-生命周期改善程序性能

已经对React生命周期有了认识,那如何利用它提高组件的性能那?这节课我们会讲一个通过shouldComponentUpdate函数,改善React组件性能的例子。

美女组件存在性能问题

是的,美女组件已经写的很熟悉了,但是它有一个性能问题,我一直没告诉你,那就是子组件MeinvItem频繁无用渲染render。如何能看出这个问题的呢?

首先你要确认你安装了React Developer Tools 如果你没有安装,可以到前边的课程学习一下安装。有了这个浏览器插件,就可以在控制台中找到React标签,然后在右边点开设置,选中highlight Updates

highlight Updates

这时候你在浏览器的文本框中输入一下内容,你可以清楚的看到子组件也发生了重新render的情况。

有很多程序员会忽略这样的性能损耗,认为没有什么大不了的,但是软件的卡顿是一点点产生的,所以必须要减少性能损耗。

可以在MeinvItem.jsrender函数里加入下面的代码,更直观的看到这个问题

render() { 
    console.log("child -- render")
    return ( 
        <li onClick={this.handleClick}>
            {this.props.avname}为你服务-{this.props.content}</li>
    );
}

利用shouldComponentUpdate解决

这个问题看似很小,但是当你页面很复杂时,足以影响用户体验,不要骗自己了。其实用shouldComponentUpdate函数就可以简单的解决调这个问题。

直接再MeinvItem.js中加入下面的代码:

shouldComponentUpdate(){
    return false;
}

这时候在浏览器中查看,问题已经没有了。但是这样做太暴力了,否定了所有的东西,那如果在真实项目中,需要改变值属性值,达到渲染就没办法了。所以我们可以更优雅一下,写出下面的代码。

shouldComponentUpdate有两个参数:

  • nextProps:变化后的属性;
  • nextState:变化后的状态;
shouldComponentUpdate(nextProps,nextState){
    if(nextProps.content !== this.props.content){
        return true
    }else{
        return false
    }

}

现在的代码就优雅一些了,也不那么暴力了。这就算是完美解决了子组件的渲染性能问题,你写的代码质量也得到了提高。其实在面试React让写TODOList应用的,都是看这个来区分等级的,能写出来的,这算普通程序员;能写出来并作性能优化的,这算有经验的程序员。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P22:React高级-生命周期改善程序性能

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发