React - render函数频繁触发导致的动画异常

antd的Tabs 组件

当在"发卡记录"时刷新页面，蓝色的线条就会从基本设置到发卡记录，这样来来回回好几次

基于业务需求，我封装了PageTabs组件

       <PageTabs
            tabList={[
              {
                key: SELECTED_TAB_SETTING,
                tab: '基本设置',
              },

              {
                key: SELECTED_TAB_MANAGER,
                tab: `卡密管理`,
              },
              {
                key: SELECTED_TAB_PRODUCT,
                tab: `发卡商品`,
              },
              !isSmsMode && {
                key: SELECTED_TAB_NOTICE,
                tab: '短信通知',
              },
              {
                key: SELECTED_TAB_RECORD,
                tab: '发卡记录',
              },
            ].filter(Boolean)}
            activeKey={selectedTab}
            onChange={this.onSelectedTabChange}
          />

正是因为 tabList 的引用在render时总是在改变，导致组件总是被重新绘制。

于是在增加了如下代码

 public shouldComponentUpdate(nextProps: PageTabsProps) {
    if (
      isEqual(nextProps.tabList, this.props.tabList) &&
      nextProps.activeKey === this.props.activeKey
    ) {
      return false;
    }
    return true;
  }

因为组件继承了React.PureComponent，添加shouldComponentUpdate方法会报错

以前我会认为赋给tabList的值应该声明为一个单独的变量，但发现那样会导致多种写法，可能声明在各个角落，命名也会大不相同，倒不如直接在属性上写，还能得到直观的提示。