• React生命周期-改善程序性能


    Xiao.jx存在性能问题

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

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

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

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

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

    render() { 
        console.log('child-render')
        return ( 
            <div onClick={this.handleClick}>
                {this.props.avname}为你做- {this.props.content}
            </div>
        );
    }

    利用shouldComponentUpdate解决

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

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

    shouldComponentUpdate(){
        return false;
    }

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

    shouldComponentUpdate有两个参数:

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

    只要输入框内容有变化,就执行true

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

  • 相关阅读:
    三次握手四次挥手
    OSI七层模型和TCP/IP协议族
    CSS水平垂直居中方式
    CSS9种水平居中方式
    CSS8种垂直居中方式
    scss 初学笔记 二 混合宏
    scss 初学笔记 一 变量声明 默认的样式 嵌套
    面向对象的程序设计之对象
    underscore.js 源码阅读 一 整体结构
    underscore.js 源码阅读 准备
  • 原文地址:https://www.cnblogs.com/GumpYan/p/13211540.html
Copyright © 2020-2023  润新知