react 性能优化
React 最基本的优化方式是使用PureRenderMixin,安装工具 npm i react-addons-pure-render-mixin --save
,然后在组件中引用并使用
import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
class List extends React.Component {
constructor(props, context) {
super(props, context);
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
this.state = {
//
}
}
//...省略其他内容...
}
React 有一个生命周期 hook 叫做shouldComponentUpdate
,组件每次更新之前,都要过一遍这个函数,如果这个函数返回true
则更新,如果返回false
则不更新。而默认情况下,这个函数会一直返回true
,就是说,如果有一些无效的改动触发了这个函数,也会导致无效的更新
那么什么是无效的改动?之前说过,组件中的props
和state
一旦变化会导致组件重新更新并渲染,但是如果props
和state
没有变化也莫名其妙的触发更新了呢(这种情况确实存在)———— 这不就导致了无效渲染吗?
这里使用this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
的意思是重写组件的shouldComponentUpdate
函数,在每次更新之前判断props
和state
,如果有变化则返回true
,无变化则返回false
。
因此,我们在开发过程中,在每个 React 组件中都尽量使用PureRenderMixin
另外的方法
1 取掉 .map
map文件是帮助我们查看报错的位置的。
map文件由devtool属性控制,如果不想要map,注释掉就可以,大约webpack.config.prod.js第57行;
2 分包
分包 用 react-loadable
https://yq.aliyun.com/articles/607992
https://www.jianshu.com/p/697669781276
3 提取第三方库
目前推荐用 DLL 的方式提取第三方库。
4 gzip压缩
gzip压缩 也需要 服务端来配合
更多优化可移步
【第1281期】React 16 加载性能优化指南
彻底解决 webpack 打包文件体积过大
react 性能优化的更多相关文章
- react性能优化
前面的话 本文将详细介绍react性能优化 避免重复渲染 当一个组件的props或者state改变时,React通过比较新返回的元素和之前渲染的元素来决定是否有必要更新实际的DOM.当他们不相等时,R ...
- React性能优化记录(不定期更新)
React性能优化记录(不定期更新) 1. 使用PureComponent代替Component 在新建组件的时候需要继承Component会用到以下代码 import React,{Componen ...
- 关于React性能优化
这几天陆陆续续看了一些关于React性能优化的博客,大部分提到的都是React 15.3新加入的PureComponent ,通过使用这个类来减少React的重复渲染,从而提升页面的性能.使用过Rea ...
- 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性能优化总结(转)
原文链接: 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的性能优化对项目的体验和可维护性都有很大的 ...
随机推荐
- iOS 横屏模态进入下一级界面, 竖屏退出
首先 Deployment Info 设置 除了 Upside Down 都勾选 然后,在AppDelegate.h 文件中 添加属性 @property(nonatomic,assign)NSI ...
- Net 4.5 WebSocket 在 Windows 7, Windows 8 and Server 2012上的比较以及问题
Net 4.5 WebSocket在Windows 8, Windows 10, Windows Server 2012可以,但是在Windows 7, 就会报错. 错误1.“一个文件正在被访问,当前 ...
- Windows&Word 常用快捷键
Win:显示开始菜单 Win + E:打开文件管理器 Win + D:显示桌面 Win + L:锁定计算机 Win + I:打开设置 Win + M:最小化所有窗口 Alt + F4:1.用来关闭当前 ...
- Java_oracle超出打开游标的最大数的原因和解决方案
第一步:核查Oracle数据库 的游标的最大数 处理超出打开游标的最大数异常(ORA-01000: maximum open cursors exceeded) ORA-01000_maximum_o ...
- Confluence 6 缓存性能优化
Confluence 的运行状态与缓存状态有这密切的关系.针对 Confluence 的管理员来说,尤其是大型站点的 Confluence 管理员,设置好缓存尤其显得关键. 希望修改缓存的大小: 进入 ...
- Confluence 6 配置 MySQL 服务器
在这一步,你将要配置你的 MySQL 数据库服务器. 注意: 如果你尝试连接你的 Confluence 到一个已经存在的 MySQL 数据库服务器.我们强烈建议你按照下面描述的安装步骤在 MySQL ...
- Confluence 6 数据库连接方式
你可以使用 JDBC URL 或者一个 JNDI 数据源来连接 Confluence 到你的数据库. 在默认的设置向导中,只提供了使用 JDBC 数据库连接选项,这个也是推荐的数据库连接选项. 如果你 ...
- 暑假里的第八篇Java
日期:2018.9.1 博客期:008 星期六 这几天刚到学校,Java方面写的少了!目前在做老师头放假前发布的那一套题目,就是哪个Java程序测试卷.至于自己能不能都做出来我自己心里十分清楚!今天就 ...
- mysql服务器没有响应
第一步删除c:\windowns下面的my.ini(可以先改成其它的名字也行) 第二步打开对应安装目录下\mysql\bin\winmysqladmin.exe 输入用户名 和密码(也可以忽略此步) ...
- git教程笔记(二)
1.首先进入自己的项目文件 在GitHub上申请一个自己的账户信息.创建一个Repository.然后复制仓库的地址在gitbush中进行clone gitbush中进行远程clone 2.gitbu ...