antd源碼分析之——標籤頁（tabs 1.組件結構）

因爲ant Tabs組件結構較複雜，共分三部分敘述，本文爲目錄中第一部分（高亮）

目錄

1、組件結構

antd代碼結構

rc-ant代碼結構

一、組件樹狀結構

二、Context使用說明

三、rc-tabs中只在example、test中使用的組件說明

2、Tabs關鍵組件功能實現

一、Tabs（antd）

二、RcTabs

三、Sentinel哨兵

四、InkTabBarNode

3、Tabs的滾動效果

ScrollableTabBarNode 

1、組件組合結構

antd代碼目錄

rc-tabs代碼目錄

 一、組件樹狀結構

上圖的代碼結構能夠看出Rc-tab的組件較多，首先梳理組件的樹狀關係，梳理過程當中發現rc-tabs中有一部分組件僅用於example、test中，文章後續章節介紹

注意：

1. 標有rc-前綴的爲rc-tabs中的組件，目前antd組價只有Tabs 和 TabBar
2. 標註需功能圖解的將會在第二部分詳細介紹功能實現

 

下圖爲僅用於僅用於example、test的組件

二、SentinelContext、SentinelProvider、SentinelConsumer

const SentinelContext = createReactContext({});
export const SentinelProvider = SentinelContext.Provider;
export const SentinelConsumer = SentinelContext.Consumer;

Context 提供了一種在組件之間共享值的方式，而沒必要顯式地經過組件樹的逐層傳遞 props，官方說明 https://react.docschina.org/docs/context.html#api

React.createContext：

const MyContext = React.createContext(defaultValue);

• React.createContext 這個API 建立一個 Context 對象，包含Provider、Consumer兩個屬性
• 當 React 渲染 context 組件 Consumer 時，它將從組件樹的上層中最接近的匹配的 Provider 讀取當前的 context 值。
• 若是上層的組件樹沒有一個匹配的 Provider，那麼defaultValue值會生效

 Context.Provider

<MyContext.Provider value={/* 某個值 */}>

• Provider 接收一個 value 屬性，傳遞給消費組件
• 當 Provider 的 value 值發生變化時，它內部的全部消費組件都會從新渲染。
• Provider 及其內部 consumer 組件都不受制於 shouldComponentUpdate 函數

Context.Consumer

<MyContext.Consumer>
    {value => /* 基於 context 值進行渲染*/}
</MyContext.Consumer>   

• 這裏須要使用函數做爲子元素（function as a child）的作法。
• 子元素函數接收當前的 context 值，返回一個 React 節點。

 三、回調 Refs

回調Refs，傳遞一個函數，這個函數中接受 React 組件實例或 HTML DOM 元素做爲參數，以使它們能在其餘地方被存儲和訪問。

詳細講解見官方文檔  https://react.docschina.org/docs/refs-and-the-dom.html#callback-refs

這裏Sentinel哨兵中將 sentinelEnd/start 和 panelSentinelEnd/start分別存儲在this.sentinelEnd/start 和 this.panelSentinelEnd/start中

四、rc-tabs中只在example、test中使用的組件說明

 待續。。。