当组件重新渲染时,会浅比较(如比较引用)props和state,如果发生改变就重新渲染组件,当不改变就不渲染组件
当使用Component时,只要改变了props/state,不管内容是否变化,都会渲染组件
方案一:
在组件中添加shouldComponentUpdate生命周期函数,对数据进行把控后再决定是否渲染
shouldComponentUpdate(nextProps,nextState)
{
if(nextProps.xx===this.props.xx)
{
return false;
}else if(nextState.xx===this.state.xx)
{
return false;
}else{
return true;
}
}
方案二:
类组件:
将Component替换成PureComponent
PureComponent内置了shouldComponentUpdate,组件中不能再写shouldComponentUpdate
当使用PureComponent时,建议使用immutable.js来管理数据
原因:
redux中使用immutable.js会每次重新返回immutable对象
若只是js,如果只改变了对象属性等,会因为引用没改变,不触发render渲染
函数组件:
const xx=React.memo(函数)
export default xx;
代码示例:
import React
,{PureComponent
} from 'react'
import { WriterWrapper
} from '../style';
class Writer extends PureComponent{
render()
{
return(
<div
>
<WriterWrapper
>writer
</WriterWrapper
>
</div
>
)
}
}
export default Writer
