React的性能优化
2024-09-05 06:03:32
1. 在constructor中绑定事件函数的this指向
把一个函数赋值给一个变量,然后用那个变量去执行函数会造成this的丢失,所以需要绑定this,把绑定放在构造函数中可以保证只绑定一次函数,如果放在render函数中绑定this的话每次渲染都会去绑定一次this,那样是很耗费性能的。
2. 使用箭头函数也就是异步函数的方式写setState
setState它是一个异步函数,他会合并多次修改,降低diff算法的比对频率。这样也会提升性能。
3. 虚拟DOM的使用
用JS对象描述DOM,而不是真的去调用浏览器API生成真实DOM。这样子啊比对前的生成会极大提升性能。
4. 同层比对
新旧状态的比对时采用同层比对,当发现某节点不一致了直接替换该节点的子树。而不管它的子树是不是真的改动了。
5. key值的使用
在列表循环的时候React会要求每一个列表项有一个独一无二,稳定的key值,它的目的是为了当状态改变时新旧状态的每一个列表项能够对应起来,方便比对。
6. shouldComponentUpdate
当父组件被重新渲染时即render函数执行时,子组件就会默认被重新渲染,但很多时候是不需要重新渲染每一个子组件的。这时就可以使用 shouldComponentUpdate 来判断是否真的需要重新渲染子组件。仅仅一个判断,就可以节约很多的消耗。
所以对于父组件发生变化而子组件不变的情况,使用shouldComponentUpdate会提升性能。
shouldComponentUpdate(nextProps, nextState) {
if(nextProps.content === this.props.content) {
return false;
} else {
return true;
}
}
作者:huyaoyao
链接:https://www.jianshu.com/p/bc00302c8d40
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
最新文章
- sublime插件 TortioseSVN
- [No000001]一切都是最好的安排
- Redis系列-配置文件小结
- Scrum Meeting 6-20151208
- spring事物传播属性
- 团体程序设计天梯赛-练习集L1-009. *N个数求和
- slides 带手势的图片滑动效果(用于移动终端)
- 从svn上回滚版本
- Spark算子--filter
- 使用VS Code开发asp.net core (下)
- vmware-tools安装——实用
- page.isvalid
- YAML文件格式_k8s/docker-compose配置文件
- [Unity算法]点是否在多边形范围内
- Python开发——数据类型【字典】
- mysql 8小时超时设置
- java8新特性: lambda表达式:直接获得某个list/array/对象里面的字段集合
- springBoot_freemark配置
- fbx模型加载的材质球路径
- [sql异常]SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的
热门文章
- ubuntu 上开发.netcore
- LC 987. Vertical Order Traversal of a Binary Tree
- 自然语言处理(NLP)之个人小结
- React Native npm第三方报错
- Vue学习笔记(三)组件间如何通信传递参数
- unity读取灰度图生成三维地形mesh
- Spark源码(1): SparkConf
- Eureka报错: Connect to localhost:8761 timed out
- java内存回收需要了解的知识
- $.ajax 中的contentType类型