由于ant Tabs元件結構較複雜，共分三部分叙述，本文為目錄中第三部分（高亮）
目錄
一、元件結構
antd代碼結構
rc-ant代碼結構
1、元件樹狀結構
2、Context使用說明
3、rc-tabs中隻在example、test中使用的元件說明
二、Tabs關鍵元件功能實作
1、Tabs（antd）
2、RcTabs
3、Sentinel哨兵
4、InkTabBarNode
三、Tabs的滾動效果
ScrollableTabBarNode
二、Tabs的滾動效果
ScrollableTabBarNode
ScrollableTabBarNode内容太多，使用多個思維導圖分别展示，内容較多總結的比較粗糙，部分細節還有疑問
首先，整體結構圖，将ScrollableTabBarNode的方法進行歸類（個人看法）
然後，根據方法内容從基礎到複雜的層次來看，首先看【state方法】和【計算寬度位置的基礎方法】
再次，是主要【功能方法】，tab标簽的滾動效果邏輯大多在這部分
最後，看【事件回調】和【生命周期方法】
在給出整體結構圖之前，先給出tab中元件結構示意圖，其中由nav包裹多個tab，使用左側或頂部偏移控制滾動位置。
滾動狀态下，上一頁、下一頁按鈕在navWrap外的左右或上下兩側
（1）整體結構
（2）state方法
this.state中next與prev兩個值，布爾型，記錄是否顯示上一頁/下一頁按鈕。
setNext、setPrev即為為next、prev指派的方法
isNextPrevShown：上一頁、下一頁中任意一個按鈕顯示即傳回true
（3）計算寬度位置基礎方法
計算寬度和位置時，橫向tab（top、bottom）計算寬度和左側偏移，縱向tab（left、right）計算高度和頂部偏移
下圖中的方法中帶【WH】字尾的為計算寬度（橫向）、高度（縱向）的方法；
帶有【LT】字尾的為計算左側（橫向）、右側（縱向）偏移量的方法；
方法中根據目前tab是橫向、縱向自動傳回對應的寬度和位置偏移
（4）功能方法
setOffset方法：計算nav的滾動偏移，并指派，需要時同時設定next和prev是否顯示
setNextPrev方法：計算上一頁、下一頁按鈕是否顯示
上一頁按鈕顯示條件：offset < 0顯示，offset >= 0時不顯示。也就是說nav向左移動的時候可以往前翻，【上一頁】按鈕顯示，其他情況不行，實際上offset最大隻能等于0，不會大于0
下一頁按鈕顯示條件相對複雜：
nav寬度小于外部容器時，隻有一頁，不需要顯示，即下圖中 containerWH - navNodeWH >= 0的情況
nav的寬度大于外部容器，且內插補點大于offset（注意，offset取值小于等于0）時，說明後面有内容，需要顯示下一頁，即下圖中containerWH - navNodeWH < offset的情況
nav的寬度大于外部容器，且內插補點等于offset時，說明全部多的tab全在左側，沒有下一頁美容，不需要顯示，及下圖中containerWH - navNodeWH < 0 && containerWH - navNodeWH = offset
上述三種情況後，剩下的是nav寬度大于外部容器，且內插補點小于offset，實際上這種情況不存在，因為最後一個tab最多隻會貼着外部容器的最右側，不會再向左移動，是以不存在containerWH - navNodeWH < 0 && containerWH - navNodeWH > offset的情況
scrollToActiveTab方法：使nav滾動到目前激活的tab頁簽位置
下面的思維導圖中最後一個葉子節點的圖與上方第一個結構大圖一緻，标注出了計算激活tab位置的幾個值
其中activeTab在上一頁、下一頁的情況分别用 tab0 和 tab5 舉例計算，結合結構圖和【nav滾動值（offset）計算】中的判斷條件、執行方法一起看了解具體
（5）事件回調
（6）生命周期方法