关于React性能优化
这几天陆陆续续看了一些关于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性能优化的更多相关文章
- react性能优化
前面的话 本文将详细介绍react性能优化 避免重复渲染 当一个组件的props或者state改变时,React通过比较新返回的元素和之前渲染的元素来决定是否有必要更新实际的DOM.当他们不相等时,R ...
- React性能优化记录(不定期更新)
React性能优化记录(不定期更新) 1. 使用PureComponent代替Component 在新建组件的时候需要继承Component会用到以下代码 import React,{Componen ...
- React性能优化之PureComponent 和 memo使用分析
前言 关于react性能优化,在react 16这个版本,官方推出fiber,在框架层面优化了react性能上面的问题.由于这个太过于庞大,我们今天围绕子自组件更新策略,从两个及其微小的方面来谈rea ...
- React 性能优化 All In One
React 性能优化 All In One Use CSS Variables instead of React Context https://epicreact.dev/css-variables ...
- React 性能优化总结
初学者对React可能满怀期待,觉得React可能完爆其它一切框架,甚至不切实际地认为React可能连原生的渲染都能完爆--对框架的狂热确实会出现这样的不切实际的期待.让我们来看看React的官方是怎 ...
- react 性能优化
React 最基本的优化方式是使用PureRenderMixin,安装工具 npm i react-addons-pure-render-mixin --save,然后在组件中引用并使用 import ...
- React性能优化总结(转)
原文链接: https://segmentfault.com/a/1190000007811296?utm_source=tuicool&utm_medium=referral 初学者对Rea ...
- react性能优化要点
1.减少render方法的调用 1.1继承React.PureComponent(会自动在内部使用shouldComponentUpdate方法对state或props进行浅比较.)或在继承自Reac ...
- React性能优化总结
本文主要对在React应用中可以采用的一些性能优化方式做一下总结整理 前言 目的 目前在工作中,大量的项目都是使用react来进行开展的,了解掌握下react的性能优化对项目的体验和可维护性都有很大的 ...
随机推荐
- img height test
- Javascript-短路 与(&&)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 018-DNS解析过程与配置DNS服务
- 171. Excel Sheet Column Number(简单数学题)
Given a column title as appear in an Excel sheet, return its corresponding column number. For exampl ...
- iostat使用
iostat -k 查看io的iowait值是否高 iotop 查看具体是哪个组件在占用io. iostat -x -x代表显示一些扩展参数. %util:一秒中有百分之多少的时间用于 I/O 操作, ...
- Python: re.compile最短匹配模式,只取双引号内的值\“
用正则表达式匹配某个文本模式 1.只取双引号内的值 2.长短匹配模式对比 贪婪模式: 模式r'\"(.*)\" '的意图是匹配被双引号包含的文本,但是这个表达式中*是贪婪的 ...
- Python: itertools.compress()
定义: itertools.compress() 输入: iterable对象 相应的Boolean选择器序列 输出: iterable对象中对应选择器为True的元素 用途: 当需要用另外一个相关联 ...
- Linux服务器---DansGuardian
DansGuardian DansGuardian可以限制客户端的访问,通过这个软件,我们可以限制哪些网站不可以访问.哪些内容不能下载. 1.下载DansGuardian,提供一个网址http://w ...
- WordPress存在DoS拒绝服务漏洞,推荐删除根目录下的xmlrpc.php
WordPress存在DoS拒绝服务漏洞,推荐删除根目录下的xmlrpc.php受影响的版本:WordPress 3.9.x-3.9.1WordPress 3.8.x-3.8.3WordPress 3 ...
- hibernate的实现原理以及延迟加载
Hibernate是怎样实现呢?主要是依据反射机制. 现在以一次数据库查询操作分析Hibernate实现原理. 假设有一个用户表(tbl_user),表中字段有id,name,sex.同时有一个实体类 ...