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中使用的元件說明

 待續。。。