react + tabs 切换有缓存不重新发起请求

<Tabs type="line" onChange={this.onTabChange}>
            {valueMap.map((item, index) => {
              return (
                <TabPane tab={item.name} key={index}>
                  <Pending
                    tabKey={tabKey}
                    status={item.status}
                    actions={this.props.actions}
                    store={this.props.store}
                  />
                </TabPane>
              )
            })}
          </Tabs>

可以看到当tab 切换的时候我有个change 事件

 onTabChange = key => {
    this.setState({ tabKey: key })
  }

在子组件内部 我做了个处理

image.png

这样 每当切换的时候 就会有一个 不同的key 传下去 一对比 再次发起请求就好啦

下面进行一个优化
因为我这个内部组件是循环得到的

因此我每次循环都会有个对比 而组件内部就会有个不同的key 做比较 我循环多少次 其实组件就发送了多少个请求 这明显是不合理的

image.png