根据之前“如何阅读源码”的脑图所述，阅读源码之前先了解关于源码的基础知识。所以RC系列是什么？

RC系列

RC 即 React components 的简称，如 github地址中所描述的那样:

React components foundation of http://ant.design

RC 是著名的蚂蚁金服开源React组件库的基础组件。

Why?

那么为什么会有RC系列呢? 我理解RC作为React的基础组件，其最重要的是定义组件的功能和交互，而不太在乎组件的样式，而 Ant Design 是在其基础上进行封装和包装，使他更易用，视觉效果更好。

有RC以及一套UI设计，你也可以造一个 类AntD 的组件库出来。

代码结构

RC代码是分散的，每个RC组件各自是一个包，因此要阅读代码的话也是一个一个的阅读。以 rc-tooltip 为例，其代码目录为:

  1. .
  2. ├── HISTORY.md
  3. ├── LICENSE
  4. ├── README.md
  5. ├── assets
  6. │   ├── boostrap
  7. │   │   └── anim.less
  8. │   ├── bootstrap.less
  9. │   └── bootstrap_white.less
  10. ├── examples
  11. │   ├── arrowContent.html
  12. │   ├── arrowContent.js
  13. │   ├── formError.html
  14. │   ├── formError.js
  15. │   ├── onVisibleChange.html
  16. │   ├── onVisibleChange.js
  17. │   ├── placement.html
  18. │   ├── placement.js
  19. │   ├── simple.html
  20. │   └── simple.js
  21. ├── package.json
  22. ├── src
  23. │   ├── Content.js
  24. │   ├── Tooltip.jsx
  25. │   ├── index.js
  26. │   └── placements.js
  27. └── tests
  28.     ├── __mocks__
  29.     │   └── rc-trigger.js
  30.     ├── index.test.js
  31.     └── setup.js

每个组件承载的功能不是很复杂，刨去其他没有用的目录，核心在于 src 文件夹下的4个文件。

  1. src
  2. │   ├── Content.js
  3. │   ├── Tooltip.jsx
  4. │   ├── index.js
  5. │   └── placements.js

Run起来

  1. $ tnpm run dev
  2. $ tnpm run start

运行起来之后，打开 http://localhost:8007/examples/arrowContent.html# ，
image.png