rc-tab

rc-tab是国人写的一款tab组件，封装于ant-design中。

公司需求

第二排的tab页需要根据右上角的过滤条件来实时更新。比如当过滤条件为高一是，tab页为[‘推荐’，’精品课程’,’物理’,’语文’]，当过滤条件为初一是，tab页可能为为[‘推荐’，’语文’,’数学’,’英语’,’历史’,’政治’]，过滤条件的长度和内容都不一样。

问题

由于每次获取的tab内容和长度都不一样，所以需要每次获取tab数据之后，利用react中this.setState()的方法来更新tab组件显示。但是奇怪的是，只有当tab数据初始化为一个不变的数组时候，才会正常显示。只要调用了this.setState()重新获取数组的时候，组件就会出现各种问题。比如无法滑动，比如点击到最后俩个tab项的时候会显示不正常。

分析

经过果果的查看，反正是由于该组件内部，在tab组件componentWillMount()周期内使用了一个缓存

1
2
3

vertical: _isVertical,
totalAvaliableDelta: _tabWidth * panels.length - _viewSize,
tabWidth: _tabWidth

react中，组件在第一次渲染的时候会调用componentWillMount生命周期钩子，之后在每次选择的时候，就不会再调用componentWillMount函数了。所以缓存里面只存了第一次的tabWidth，因而再次进行数据的时候，组件还会根据首次tabWidth和totalAvaliableDelta进行计算，但是数据的内容和长度都变了。所以会出现那种bug

修复

明白了原理，修复就很简单了。react中父组件给子组件传数据的时候，会调用componentWillReceiveProps生命周期，所以在componentWillReceiveProps里面每次刷新tabWidth就行了。关键代码应该之后会提交给rc-tab组件的作者。

总结

希望以后可以有时间去研究这些，而不是被公司逼着每天写很乱的迭代项目。