antd源码分析之——标签页（tabs）

一、组件结构

antd代码结构

rc-ant代码结构

1、组件树状结构

2、Context使用说明

3、rc-tabs中只在example、test中使用的组件说明

二、Tabs关键组件功能实现

1、Tabs

三、RcTabs关键组件功能实现

1、RcTabs

2、Sentinel哨兵

3、ScrollableTabBarNode

4、InkTabBarNode

四、组件关系

一、组件组合结构

antd代码目录

rc-tabs代码目录

1、组件树状结构

上图的代码结构可以看出Rc-tab的组件较多，首先梳理组件的树状关系，梳理过程中发现rc-tabs中有一部分组件仅用于example、test中，文章后续章节介绍

注意：

标有rc-前缀的为rc-tabs中的组件，目前antd组价只有Tabs 和 TabBar
标注需功能图解的将会在第二部分详细介绍功能实现

下图为仅用于仅用于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中使用的组件说明

待续。。。

二、Tabs关键组件功能实现

1、Tabs

antd中的Tabs主要控制可编辑态和Tabs额外的按钮，具体tab功能实现交给rc-Tabs，具体内容见下图

render方法源码对照

三、RcTabs关键组件功能实现

1、RcTabs

2、Sentinel哨兵

sentinel哨兵负责监听tab键盘事件，tab键focus焦点向后移动，shift+tab键焦点向前移动

前后关系如下图所示

代码

3、ScrollableTabBarNode

ScrollableTabBarNode内容太多，使用多个思维导图分别展示，内容较多总结的比较粗糙，部分细节还有疑问

首先，整体结构图，将ScrollableTabBarNode的方法进行归类（个人看法）

然后，根据方法内容从基础到复杂的层次来看，首先看【state方法】和【计算宽度位置的基础方法】

再次，是主要【功能方法】，tab标签的滚动效果逻辑大多在这部分

最后，看【事件回调】和【生命周期方法】

（1）整体结构

（2）state方法

（3）计算宽度位置基础方法

（4）功能方法

（5）事件回调

（6）生命周期方法