React性能优化记录(不定期更新)
React性能优化记录(不定期更新)
1. 使用PureComponent代替Component
在新建组件的时候需要继承Component
会用到以下代码
import React,{Component} from 'react';
import {connect} from 'react-redux';
class Item extends Comonent{
render(){}
}
''''
export default connect(''',''')(Item);
如果使用了react-redux
来管理组件的stat
的话,因为一个state
更新了,只要使用connect
的组件,无论更新的state
是否和该组件有关都会更新,这就导致了性能下降,这里可以使用PureComponent
来替代Component
,因为PureComponent
会自带一个生命周期函数componentShouldUpdate()
来判断更新的state是否和该组件有关来决定是否更新该组件。