antd的Tabs 組件
當(dāng)在"發(fā)卡記錄"時刷新頁面拳昌，藍(lán)色的線條就會從基本設(shè)置到發(fā)卡記錄瘫俊，這樣來來回回好幾次
基于業(yè)務(wù)需求，我封裝了PageTabs組件
<PageTabs
tabList={[
{
key: SELECTED_TAB_SETTING,
tab: '基本設(shè)置',
},
{
key: SELECTED_TAB_MANAGER,
tab: `卡密管理`,
},
{
key: SELECTED_TAB_PRODUCT,
tab: `發(fā)卡商品`,
},
!isSmsMode && {
key: SELECTED_TAB_NOTICE,
tab: '短信通知',
},
{
key: SELECTED_TAB_RECORD,
tab: '發(fā)卡記錄',
},
].filter(Boolean)}
activeKey={selectedTab}
onChange={this.onSelectedTabChange}
/>
正是因?yàn)?tabList 的引用在render時總是在改變，導(dǎo)致組件總是被重新繪制碗降。
于是在增加了如下代碼
public shouldComponentUpdate(nextProps: PageTabsProps) {
if (
isEqual(nextProps.tabList, this.props.tabList) &&
nextProps.activeKey === this.props.activeKey
) {
return false;
}
return true;
}
因?yàn)榻M件繼承了React.PureComponent匿又，添加shouldComponentUpdate方法會報錯
以前我會認(rèn)為賦給tabList的值應(yīng)該聲明為一個單獨(dú)的變量方灾，但發(fā)現(xiàn)那樣會導(dǎo)致多種寫法，可能聲明在各個角落碌更，命名也會大不相同裕偿，倒不如直接在屬性上寫，還能得到直觀的提示痛单。
