使用shouldComponentUpdate进行性能优化

发布时间:2019-08-13 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了使用shouldComponentUpdate进行性能优化脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

众所周知,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去学习。

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

脚本宝典总结

以上是脚本宝典为你收集整理的使用shouldComponentUpdate进行性能优化全部内容,希望文章能够帮你解决使用shouldComponentUpdate进行性能优化所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。