使用shouldComponentUpdate进行性能优化

andong777 发布于2019-08-26 13:23 / 921人阅读

摘要：众所周知，中值的变化，会导致组件重新渲染。使用就是为了减少不必要的渲染。此方法就是拿当前中值和下一次中的值进行对比，数据相等时，返回，反之返回。使用进行深拷贝，但是遇到数据为和函数时就会错。使用进行项目的搭建。

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

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

超融合服务器混合云 ecs性能设置阈值进行预警性能优化优化系统性能网站性能优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108727.html

React组件性能优化

摘要：如果组件是纯函数的，就是给组件相同的和组件就会展现同样的，可以使用这个来优化组件的性能。仅用于拥有简单和的组件。虽然提供简单的来提升性能，但是如果有更特殊的需求时怎么办如果组件有复杂的和怎么办这个时候就可使用来进行更加定制化的性能优化。 React: 一个用于构建用户界面的JAVASCRIPT库. React仅仅专注于UI层；它使用虚拟DOM技术，以保证它UI的高速渲染；它使用单向数据...

oysun 2019-08-21 10:56 评论0 收藏0
使用React.memo()来优化函数组件的性能

摘要：函数组件上面我们探讨了如何使用和的方法优化类组件的性能。它的作用和类似，是用来控制函数组件的重新渲染的。其实就是函数组件的。原文链接: Improving Performance in React Functional Component using React.memo 原文作者: Chidume Nnamdi 译者: 进击的大葱推荐理由: 本文讲述了开发React应用时如...

BetaRabbit 2019-08-23 16:04 评论0 收藏0
使用shouldComponentUpdate进行性能优化

摘要：众所周知，中值的变化，会导致组件重新渲染。使用就是为了减少不必要的渲染。此方法就是拿当前中值和下一次中的值进行对比，数据相等时，返回，反之返回。使用进行深拷贝，但是遇到数据为和函数时就会错。使用进行项目的搭建。众所周知，react中props,state值的变化，会导致组件重新渲染。使用shouldComponentUpdate就是为了减少render不必要的渲染。本文着重回答以下...

zlyBear 2019-08-05 18:08 评论0 收藏0
React性能优化

摘要：当大家考虑在项目中使用的时候，第一个问题往往是他们的应用的速度和响应是否能和非版一样，每当状态改变的时候就重新渲染组件的整个子树，让大家怀疑这会不会对性能造成负面影响。当大家考虑在项目中使用 React 的时候，第一个问题往往是他们的应用的速度和响应是否能和非 React 版一样，每当状态改变的时候就重新渲染组件的整个子树，让大家怀疑这会不会对性能造成负面影响。React 用了一些黑...

n7then 2019-08-21 14:15 评论0 收藏0
【译】React应用性能优化

摘要：应用主要的的性能瓶颈来自于一些冗余的程序处理以及组件中的的过程。为了避免这种情况，在你的应用中尽可能多的让返回。使用工具将帮助你找到应用程序中特定的性能问题。这个工具跟用起来很像，但是它是专门用来检测应用性能的。这段时间对自己写的React应用的性能做了一些分析以及优化，发现项目中产生性能问题的原因主要来自两个方面：大量的数据渲染使组件进行不必要的diff过程，导致应用卡顿；部...

txgcwm 2019-08-20 14:19 评论0 收藏0