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,会冲突