react性能优化要点
1.减少render方法的调用
1.1继承React.PureComponent(会自动在内部使用shouldComponentUpdate方法对state或props进行浅比较。)或在继承自React.Component类型的组件中使用shouldComponentUpdate方法来决定render方法是否被调用。
使用浅比较时,如果是对象类型就会出问题,因此最好是使用immutable类型。《immutable在性能优化中的作用》
1.2在调用组件时,如果某个属性值是函数,避免使用箭头函数,不然每次比较props中该属性时都是不同的。
<IfEqual onClick={()=>{}} />
正确的做法是将onClick中的函数定义为组件的一个方法。
class App extends React.Component {
handleClick = () =>{}
render() {
return (
<IfEqual onClick={this.handleClick} />
);
}
}
1.3 如果是纯函数组件,从16.6起,可以使用React.memo来实现类似PureComponent
和 shouldComponentUpdate
的解决方案。
2.避免使用状态提升来共享state,此时应该使用redux解决方案。
因为组件层次太深的话,在祖先组件中setState会导致无数个子孙组件的render方法再次被调用。(如果不是PureComponent或未使用shouldComponentUpdate方法)
<<什么时候该用redux>>,该文章里说明了设么时候会发生状态提升。
3.dom结构的控制
3.1 保持稳定的dom结构,尽量避免dom节点跨层级移动操作。
3.2 使用css来隐藏节点,而不是真的移除或添加DOM节点。
上述两项优化的原因在于:
由于 React diff算法是逐层比较virtual tree的节点,同一层级的节点只会做如下操作:1.交互位置、2.添加 3.删除(移动也会被当做删除)
如上图,A 节点(包括其子节点)整个被移动到 D 节点下,执行过程如下:create A -> create B -> create C ->delete A
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可能满怀期待,觉得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 ...
随机推荐
- Feign进行文件上传+表单调用
Feigin默认是不支持文件上传和表单提交的,需要做一些配置才能支持. 1.feign依赖 图中红色为form支持必须的jar. 2.添加自定义Encoder类: import static java ...
- Tensorflow不能使用GPU的解决办法
转载:https://blog.csdn.net/kudou1994/article/details/86735451 服务器在训练模型,另一边我在瞎胡乱搞不晓得咋个搞的,就不能使用GPU了.pyth ...
- 创建Observer
观察者 观察者作用就是监听事件, 然后对这个事件做出响应, 或者说任何响应时间的行为都是观察者 1. 在subscribe()方法中创建监听者 创建观察者最直接的方法就是在Observable的sub ...
- 统一异常处理:HandlerExceptionResolver
SpringExceptionResolver.java package com.mmall.common; import com.mmall.exception.PermissionExceptio ...
- 【npm permission denied错误】npm ERR! Error: EACCES: permission denied, access
在命令前加上 sudo sudo npm install --save-dev grunt 不过这样子可能还是不行,你需要这样: sudo npm install --unsafe-perm=true ...
- Promise.resolve解析
总结自:https://blog.csdn.net/lq15310444798/article/details/81275278 Promise.resolve返回一个Promise实例 参数分4种情 ...
- Kubernetes平台环境搭建
软件 版本 Linux操作系统 CentOS7.4 Kubernetes 1.12 Docker 18.xx-ce Etcd 3.x Flannel 0.10 角色 IP 组件 推荐配置 master ...
- vue双循环或者多循环作用于同一元素时,在外套template标签
如图,两个v-for,都是要循环创建tr标签.同理,v-if也是套template
- javascript中var、let、const的区别
这几天修改别人的js,发现声明变量有的用var,有的用let,那它们有什么区别呢? javascript中声明变量的方式有:var.let.const 1.var (1)作用域: 整个函数范围内,或者 ...
- VUE AntDesign DatePicker设置默认显示当前日期
1:main.js中引入依赖 import Vue from "vue"; import { DatePicker } from 'ant-design-vue'; import ...