博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用shouldComponentUpdate进行性能优化
阅读量:5982 次
发布时间:2019-06-20

本文共 1150 字,大约阅读时间需要 3 分钟。

众所周知,react中props,state值的变化,会导致组件重新渲染。使用shouldComponentUpdate就是为了减少render不必要的渲染。 本文着重回答以下问题:

1:如何使用使用shouldComponentUpdate记性优化;

shouldComponentUpdate(nexrProps) {    if (this.props.num === nexrProps.num) {        return false    }    return true;}

相信大家都知道这种方式,shouldComponentUpdate提供了两个参数nextProps和nextState,表示下一次props和一次state的值,当函数返回false时候,render()方法不执行,组件也就不会渲染,返回true时,组件照常重渲染。此方法就是拿当前props中值和下一次props中的值进行对比,数据相等时,返回false,反之返回true。但是此方法面对复杂的对象时,就没有效果了,比如说props长成这样,就没法应对了,因为在js中,object,array,function属于引用类型,即使改变其中数据,他们指向的还是同一内存地址,所以采用上面的判断就不行了。

obj: {    age: 12,    name: 'xioabbao',    student: {        count: 1    }}

2: 解决方法有三种:

(1)使用setState改变数据之前,先采用es6中assgin进行拷贝,但是assgin只深拷贝的数据的第一层,所以说不是最完美的解决办法。

const o2 = Object.assign({},this.state.obj)    o2.student.count = '00000';    this.setState({        obj: o2,    })

(2)使用JSON.parse(JSON.stringfy())进行深拷贝,但是遇到数据为undefined和函数时就会错。

const o2 = JSON.parse(JSON.stringify(this.state.obj))    o2.student.count = '00000';    this.setState({        obj: o2,    })

(3)使用immutable.js进行项目的搭建。immutable中讲究数据的不可变性,每次对数据进行操作前,都会自动的对数据进行深拷贝,项目中数据采用immutable的方式,可以轻松解决问题,但是又多了一套API去学习。

此文章属于个人一时见解,希望大家多多指教。

转载地址:http://fmrox.baihongyu.com/

你可能感兴趣的文章
postfix运行环境配置文件汇总
查看>>
谈谈多线程编程
查看>>
Exchange 2003 升级 2010地址列表升级
查看>>
Android SDCard UnMounted 流程分析(三)
查看>>
提高Axure设计效率的10条建议 (转)
查看>>
在应用程序中宿主MEF
查看>>
烂泥:nagios监控单网卡双IP
查看>>
采用UDP传输音视频时的效果
查看>>
[零基础学JAVA]Java SE应用部分-30.Java IO操作(04)
查看>>
Vmware vSphere 5.0实战教程之一 vSphere高级应用测试环境搭建
查看>>
ArrayList与结构体应用
查看>>
SystemCenter2012SP1实践(21)VMM管理XenServer的支持特性
查看>>
Java中的资源
查看>>
MDOP 2011 R2 DaRT 7.0 创建包含诊断和恢复的图形化PE
查看>>
C# 获取当前路径方法
查看>>
通过外接程序将Outlook邮件导出成Word文档
查看>>
【ASP.NET 问题】IIS发布网站后出现 "处理程序“PageHandlerFactory-Integrated”在其模块列表中有一个错误"的解决办法...
查看>>
android99 拍照摄像
查看>>
go17---并发
查看>>
android 47 service绑定
查看>>