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

阳光穿透心脏的1/2处 2023-10-06 20:50 16阅读 0赞

#### React16 基础 ####

*  阐述
 *  服务组件存在性能问题
 *  利用 \`shouldComponentUpdate\` 解决

## 阐述 ##

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

## 服务组件存在性能问题 ##

是的，服务组件已经写的很熟悉了，但是它有一个性能问题，我一直没告诉你，那就是子组件 `BeautyItem` 频繁无用渲染 `render`。

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

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]  
这时候你在浏览器的文本框中输入一下内容，你可以清楚的看到子组件也发生了重新 render的情况。

有很多程序员会忽略这样的性能损耗，认为没有什么大不了的，但是软件的卡顿是一点点产生的，所以必须要减少性能损耗。可以在 `BeautyItem.js` 的 render 函数里加入下面的代码，更直观的看到这个问题

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

## 利用 `shouldComponentUpdate` 解决 ##

这个问题看似很小，但是当你页面很复杂时，足以影响用户体验，不要骗自己了。

其实用 `shouldComponentUpdate`函数就可以简单的解决调这个问题。

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

shouldComponentUpdate(){
        
        return false;
    }

这时候在浏览器中查看，问题已经没有了。

但是这样做太暴力了，否定了所有的东西，那如果在真实项目中，需要改变值属性值，达到渲染就没办法了。

所以我们可以更优雅一下，写出下面的代码：

`shouldComponentUpdate` 有两个参数：

`nextProps`:变化后的属性;  
`nextState`:变化后的状态;

shouldComponentUpdate(nextProps,nextState){
        
        if(nextProps.content !== this.props.content){
        
            return true
        }else{
        
            return false
        }
    
    }

现在的代码就优雅一些了，也不那么暴力了。

这就算是完美解决了子组件的渲染性能问题，你写的代码质量也得到了提高。

其实在面试React让写 `TODOList` 应用的，都是看这个来区分等级的，能写出来的，这算普通程序员;能写出来并作性能优化的，这算有经验的程序员。

![在这里插入图片描述][98c0cfd44d524545a5cdf23570cecdab.gif_pic_center]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/542f00ba253945bdbbf014b0eb1877f4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[98c0cfd44d524545a5cdf23570cecdab.gif_pic_center]: https://img-blog.csdnimg.cn/98c0cfd44d524545a5cdf23570cecdab.gif#pic_center