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
最新文章
- Windows系统上的.Net版本和.NETFramework的C#版本
- twobin博客样式—“蓝白之风”
- N个节点的二叉树有多少种形态
- Windows Server 2012 R2 里面如何安装Net Framework 3.5
- 配置ogg异构oracle-mysql 双向同步注意事项
- SQL SERVER 查看所有index
- 【Python】python2.7安装pysvn
- Android Studio安装使用图文教程(转)
- JSON入门实例
- Java常见排序算法之折半插入排序
- [FJSC2014]圈地
- List、Set、 数组等转字符串
- java 从零开始,学习笔记之基础入门<;Oracle_基础>;(三十三)
- Ecplise 中 加载JDBC 连接 Mysql 数据库读取数据
- C#检查字符串是否是合法的HTTP URL地址的代码
- 关于MDN,HTML入门来自MDN文档
- chattr命令详解
- redis 延时任务 看一篇成高手系列2
- varnish实践
- 冒泡排序与选择排序(经典版)----java基础总结