前面的话

  本文将详细介绍react性能优化

避免重复渲染

  当一个组件的props或者state改变时,React通过比较新返回的元素和之前渲染的元素来决定是否有必要更新实际的DOM。当他们不相等时,React会更新DOM。

  在一些情况下,组件可以通过重写这个生命周期函数shouldComponentUpdate来提升速度, 它是在重新渲染过程开始前触发的。 这个函数默认返回true,可使React执行更新:

shouldComponentUpdate(nextProps, nextState) {
return true;
}

  如果知道在某些情况下组件不需要更新,可以在shouldComponentUpdate内返回false来跳过整个渲染进程,该进程包括了对该组件和之后的内容调用render()指令

  如果想让组件只在props.color或者state.count的值变化时重新渲染,可以像下面这样设定shouldComponentUpdate

  shouldComponentUpdate(nextProps, nextState) {
if (this.props.color !== nextProps.color) {
return true;
}
if (this.state.count !== nextState.count) {
return true;
}
return false;
}

【pureComponent】

  在以上代码中,shouldComponentUpdate只检查props.colorstate.count的变化。如果这些值没有变化,组件就不会更新。当组件变得更加复杂时,可以使用类似的模式来做一个“浅比较”,用来比较属性和值以判定是否需要更新组件。这种模式十分常见,因此React提供了一个辅助对象来实现这个逻辑 - 继承自React.PureComponent。以下代码可以更简单的实现相同的操作:

class CounterButton extends React.PureComponent {
constructor(props) {
super(props);
this.state = {count: };
} render() {
return (
<button
color={this.props.color}
onClick={() => this.setState(state => ({count: state.count + }))}>
Count: {this.state.count}
</button>
);
}
}

  大部分情况下,可以使用React.PureComponent而不必写自己的shouldComponentUpdate,它只做一个浅比较。但是由于浅比较会忽略属性或状态突变的情况,此时不能使用它

避免突变

  PureComponent将会在this.props.words的新旧值之间做一个简单的比较。由于代码中words数组在WordAdderhandleClick方法中被改变了,尽管数组中的实际单词已经改变,this.props.words的新旧值还是相等的,因此即便ListOfWords具有应该被渲染的新单词,它还是不会更新。

  handleClick() {
// This section is bad style and causes a bug
const words = this.state.words;
words.push('marklar');
this.setState({words: words});
}

  避免此类问题最简单的方式是避免使用值可能会突变的属性或状态。例如,上面例子中的handleClick应该用concat重写成:

handleClick() {
this.setState(prevState => ({
words: prevState.words.concat(['marklar'])
}));
}

  或者使用展开运算符

handleClick() {
this.setState(prevState => ({
words: [...prevState.words, 'marklar'],
}));
};

  也可以用相似的方式重写可以会突变的对象。例如,假设有一个叫colormap的对象,我们想写一个把colormap.right改变成'blue'的函数,我们应该写:

function updateColorMap(colormap) {
colormap.right = 'blue';
}

  想要实现代码而不污染原始对象,我们可以使用Object.assign方法

function updateColorMap(colormap) {
return Object.assign({}, colormap, {right: 'blue'});
}

  或者使用扩展运算符

function updateColorMap(colormap) {
return {...colormap, right: 'blue'};
}

immutable

  Immutable.js是解决这个问题的另一种方法。它通过结构共享提供不可突变的,持久的集合

  1、不可突变:一旦创建,集合就不能在另一个时间点改变

  2、持久性:可以使用原始集合和一个突变来创建新的集合。原始集合在新集合创建后仍然可用

  3、结构共享:新集合尽可能多的使用原始集合的结构来创建,以便将复制操作降至最少从而提升性能

  不可突变数据使得变化跟踪很方便。每个变化都会导致产生一个新的对象,因此只需检查索引对象是否改变。例如,在这个常见的JavaScript代码中:

const x = { foo: 'bar' };
const y = x;
y.foo = 'baz';
x === y; // true

  虽然y被编辑了,但是由于它与x索引了相同的对象,这个比较会返回true。可以使用immutable.js实现类似效果:

const SomeRecord = Immutable.Record({ foo: null });
const x = new SomeRecord({ foo: 'bar' });
const y = x.set('foo', 'baz');
x === y; // false

  在这个例子中,x突变后返回了一个新的索引,因此我们可以安全的确认x被改变了

  还有两个库可以帮助我们使用不可突变数据:seamless-immutable 和immutability-helper。 实现shouldComponentUpdate时,不可突变的数据结构帮助我们轻松的追踪对象变化。这通常可以提供一个不错的性能提升

react性能优化的更多相关文章

  1. React性能优化记录(不定期更新)

    React性能优化记录(不定期更新) 1. 使用PureComponent代替Component 在新建组件的时候需要继承Component会用到以下代码 import React,{Componen ...

  2. 关于React性能优化

    这几天陆陆续续看了一些关于React性能优化的博客,大部分提到的都是React 15.3新加入的PureComponent ,通过使用这个类来减少React的重复渲染,从而提升页面的性能.使用过Rea ...

  3. React性能优化之PureComponent 和 memo使用分析

    前言 关于react性能优化,在react 16这个版本,官方推出fiber,在框架层面优化了react性能上面的问题.由于这个太过于庞大,我们今天围绕子自组件更新策略,从两个及其微小的方面来谈rea ...

  4. React 性能优化 All In One

    React 性能优化 All In One Use CSS Variables instead of React Context https://epicreact.dev/css-variables ...

  5. React 性能优化总结

    初学者对React可能满怀期待,觉得React可能完爆其它一切框架,甚至不切实际地认为React可能连原生的渲染都能完爆--对框架的狂热确实会出现这样的不切实际的期待.让我们来看看React的官方是怎 ...

  6. react 性能优化

    React 最基本的优化方式是使用PureRenderMixin,安装工具 npm i react-addons-pure-render-mixin --save,然后在组件中引用并使用 import ...

  7. React性能优化总结(转)

    原文链接: https://segmentfault.com/a/1190000007811296?utm_source=tuicool&utm_medium=referral 初学者对Rea ...

  8. react性能优化要点

    1.减少render方法的调用 1.1继承React.PureComponent(会自动在内部使用shouldComponentUpdate方法对state或props进行浅比较.)或在继承自Reac ...

  9. React性能优化总结

    本文主要对在React应用中可以采用的一些性能优化方式做一下总结整理 前言 目的 目前在工作中,大量的项目都是使用react来进行开展的,了解掌握下react的性能优化对项目的体验和可维护性都有很大的 ...

随机推荐

  1. 一个极为简单的方法实现本地(离线)yum安装rpm包

    首先,我要关心的问题仍然是如何离线或者本地yum安装rpm包?这其中的关键当然是获取rpm包到本地,这其中的麻烦事是去解析依赖关系.然而,我发现一个极为简单的方法可以不用操心rpm包依赖关系,不多不少 ...

  2. 免费开源ERP Odoo实施指南 连载二:POSTGRESQL概述

    PostgreSQL是Odoo支持的数据库.PostgreSQL是起源于大学的一个历史很长的开源数据库系统.包括美国航天局NASA.德国证券交易中心.中国的平安.腾讯的微信支付.阿里巴巴的阿里云都在用 ...

  3. iOS-----------计算两个时间的时间差

    UIButton * nameButton = [UIButton buttonWithType:UIButtonTypeCustom]; nameButton.frame = CGRectMake( ...

  4. 对国内IoT的展望

    这个世界上让任何人最安心的,莫过于自己能够完全控制,反之什么都无法控制的,万念俱灰之下,最后只有自我了结.芸芸众生都是在这个之间徘徊,尽可能的去掌控,尽可能的去拥有,觉得能够安心,其实只是自由的内心被 ...

  5. net view 提示6118错误 解决方法。

    1.win+R ,输入services.msc 开启服务:Server ,WorkStation,computer Browser 2.如果你的电脑没有computer Browser服务,win+R ...

  6. AngularJS学习之旅—AngularJS HTML DOM(十三)

    1.AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令:ng-disabled 指令直接绑定应用程序数据 ...

  7. InsecureRequestWarning: Unverified HTTPS request is being made. Adding certificate verification is strongly advised.解决办法

    最近使用requests进行get请求的时候,控制台输出如下错误. InsecureRequestWarning: Unverified HTTPS request is being made. Ad ...

  8. 局部敏感哈希(Locality-Sensitive Hashing, LSH)

    本文主要介绍一种用于海量高维数据的近似最近邻快速查找技术——局部敏感哈希(Locality-Sensitive Hashing, LSH),内容包括了LSH的原理.LSH哈希函数集.以及LSH的一些参 ...

  9. 4.13Python数据处理篇之Matplotlib系列(十三)---轴的设置

    目录 目录 前言 (一)设置轴的范围 1.同时对于x,y轴设置 2.分别对与x,y轴的设置 (二)设置刻度的大小 1.普通的刻度设置 2.添加文本的刻度设置 3.主副刻度的设置 (三)设置轴的数据 1 ...

  10. FutureTask并发详解,通俗易懂

    最近做项目,使用到了FutureTask和主线程并发,应用到实际中还是挺实用的,特在此总结一下. 有不对之处,忘各位多多指出. package com.demo; import java.util.c ...