这几天陆陆续续看了一些关于React性能优化的博客,大部分提到的都是React 15.3新加入的PureComponent ,通过使用这个类来减少React的重复渲染,从而提升页面的性能。使用过React的朋友都知道,React组件只有在state和props发生改变时才会触发render,如果state和props没有发生改变,render就不执行。通常在写页面的时候,如果没有使用PureComponent类,为了避免重复渲染而产生的性能问题,我们会使用shouldComponentUpdate手动来比较页面是否需要重新渲染,这时我们是可以进行深比较的,也就是将当前的state与nextState或者props与nextProps一层一层进行比较,如果比较发现不相等,这个函数就返回true从而使组件重新渲染,如果比较后发现值没有改变则返回false来阻止组件重新渲染。当我们使用了PureComponent类后,就不再需要手动检查组件是否需要重新渲染了,因为PureComponent会帮我们检查state和prop是否发生改变,从而决定是否要调用render方法,从而提高性能。但是需要注意的是,使用PureComponent时,React只是做了最外层的浅比较:

if (this._compositeType === CompositeTypes.PureClass) {
shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);
}
shadowEqual只会浅检查组件的props和state,所以嵌套对象和数组是不会被比较的。所以使用了PureComponent的时候,我们要特别注意这一点。

好了,今天要分享的除了上面的关于PureComponent的原理外,还要分享一篇关于React性能优化的干货博客,

英文原文: React Performance Fixes on Airbnb Listing Pages:https://medium.com/airbnb-engineering/recent-web-performance-fixes-on-airbnb-listing-pages-6cd8d93df6f4

译文:Airbnb 爱彼迎房源详情页中的 React 性能优化:https://juejin.im/entry/5bab390c5188255c8a06013f

转载地址:https://www.f2ecoder.net/857.html

关于React性能优化的更多相关文章

  1. react性能优化

    前面的话 本文将详细介绍react性能优化 避免重复渲染 当一个组件的props或者state改变时,React通过比较新返回的元素和之前渲染的元素来决定是否有必要更新实际的DOM.当他们不相等时,R ...

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

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

  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. try except else

    try except 语句还有一个可选的else子句,如果使用这个子句,那么必须放在所有的except子句之后.这个子句将在try子句没有发生任何异常的时候执行.例如: for arg in sys. ...

  2. cocos代码研究(1)Node学习笔记

    理论部分 Node类继承自Ref类,是cocos框架中基础底层的一个封装类,与画面渲染相关的类一般都是继承自该类,例如Scene,Layer,Sprite,Sprite3D,Label,SpriteB ...

  3. camera原理

    1)Color Filter Array---CFA 图像传感器都采用一定的模式来采集图像数据,常用的有 BGR 模式和 CFA 模式.BGR 模式是一种可直接进行显示和压缩等处理的图像数据模式,它 ...

  4. python 的math模块

    数学模块用法:import math# 或 from math import * 变量 描述 math.e 自然对数的底e math.pi 圆周率pi 函数名 描述 math.ceil(x) 对x向上 ...

  5. Python3 简明教程

    Python是由吉多·范罗苏姆(Guido Van Rossum)在90年代早期设计.它是如今最常用的编程 语言之一.它的语法简洁且优美,几乎就是可执行的伪代码. 注意:这篇教程是特别为Python3 ...

  6. clock_gettime接口和linux时间系统

    RTC/OSCRTC,Real Time Clock,真实时钟,也叫做CMOS时钟,又叫walltimeOSC,Operation System Clock,系统时钟.在开机时操作系统取得RTC中的时 ...

  7. 什么是公网IP、内网IP和NAT转换?

    搞网络通信应用开发的程序员,可能会经常听到外网IP(即互联网IP地址)和内网IP(即局域网IP地址),但他们的区别是什么? 1.引言 搞网络通信应用开发的程序员,可能会经常听到外网IP(即互联网IP地 ...

  8. centos+Jenkins+maven搭建持续集成

    Jenkins是一个开源软件项目,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能 什么是持续集成 随着软件开发复杂度的不断提高,团队开发成员间如何更好地协同工作以确保软件开发的质量已经慢慢成 ...

  9. 20145304 Exp8 Web基础

    20145304 Exp8 Web基础 实验后回答问题 (1)什么是表单 表单用于搜集不同类型的用户输入,由三个基本组成部分表单标签.表单域.表单按钮.表单提交有两种方法,分别是get和post,使用 ...

  10. libcurl开源库在Win32程序中使用下载文件显示进度条实例

    一.配置工程引用libcurl库 #define CURL_STATICLIB #include "curl/curl.h" #ifdef _DEBUG #pragma comme ...