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

由於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 

一、組件組合結構

antd代碼目錄

rc-tabs代碼目錄

 1、組件樹狀結構

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

注意：

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

 

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

2、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 節點。

 3、回調 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中

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

 待續。。。