react-性能优化
事件优化
//性能优化中的事件优化,因为每次bind执行都会返回新函数,我们这里只执行一次
this.goNewsContent=this.goNewsContent.bind(this);//constructor
<div className="newsContent" onClick={this.goNewsContent}>//render
这种写法有个缺点,就是没有办法传参
shouldComponentUpdate优化
每次setState执行时,即使数据改变前后是一个值,还是会触发render渲染.这时我们就可以通过should比较新旧state,props的值,来确定是否执行后续渲染,返回true执行,false不执行
redux中使用immutable
减少了reducer中state深拷贝带来的性能消耗
componentWillUnmount
这里做事件的解绑
styled-component
用js表达css,导出一个函数,符合react的定位,
长列表缓存
防止数据大量渲染的时候页面卡顿
pureComponent
import {pureComponent} from ‘react’
通过pureComponent创建的组件,在执行setState后,组件内部会对修改的数据进行一次浅比较(基本数据类型比较).
数据前后相等的情况下,就不会去再次渲染.
注意使用了pure就不能在使用shouldComponentUpdate,会冲突
开源中国博客地址:https://my.oschina.net/u/2998098/blog/1540520