ant design源码分析 1 研究方法-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

ant design源码分析 1 研究方法

简介: ant design 是一套设计语言。 这里为了学习react,我主要学习用 React实现 的各个组件。这个是由官方维护的,代码质量高些。还有 基于vue 实现的。

ant design 是一套设计语言。
这里为了学习react,我主要学习用 React实现 的各个组件。这个是由官方维护的,代码质量高些。还有 基于vue 实现的。
源码在 github 上。
阅读readme打开 开发者说明
├── components # react source code and demos
├── docs # documentation in markdown
├── scripts #
├── site # website layout and code
└── package.json

要学源码其实主要关心components目录即可。
我会根据 使用文档 一个个组件的去研究。从小到大,从简单到复杂。

需要注意的是:

  1. 很多组件是基于 基础组件 构造的,我不会对基础组件做深入研究。
  2. 源码中组件的扩展名是tsx,说明是用TypeScript写的。使用TypeScript有个非常大的好处。比如打开row.tsx
  3. 我在会仿照省略一个代码并转换成es6写法去运行。地址
export interface RowProps {
  className?: string;
  gutter?: number;
  type?: 'flex';
  align?: 'top' | 'middle' | 'bottom';
  justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between';
  style?: React.CSSProperties;
  prefixCls?: string;
}
...
  static defaultProps = {
    gutter: 0,
  };

  static propTypes = {
    type: PropTypes.string,
    align: PropTypes.string,
    justify: PropTypes.string,
    className: PropTypes.string,
    children: PropTypes.node,
    gutter: PropTypes.number,
    prefixCls: PropTypes.string,
  };

这里RowProps定义的row的属性信息。看到这些立马就能知道Row组件可以接收的各个属性信息,其中gutter是数字类型,type的默认值flex,align可以写top,middle,bottom三者其一。等等,非常方便。
脑海中就知道实际项目中可以这么写<Row gutter={16} align="top" style={color: "red"}></Row>

关于入口文件 index.js

主要作用做了两件事。

  1. 收集components目录下的每个组件的style文件,最终应该汇总成一个样式文件。
  2. 将每个组件的index.tsx挂到export下。方便import。比如 import { Table, Card } from 'antd';
/* eslint no-console:0 */
// 字符串转驼峰
// camelCase('dwdDdwdS') => "DwdDdwdS"
// camelCase('abc-de-FghiJ') => "AbcDeFghiJ"
function camelCase(name) {
  return name.charAt(0).toUpperCase() +
    name.slice(1).replace(/-(\w)/g, (m, n) => {
      return n.toUpperCase();
    });
}

// Just import style for https://github.com/ant-design/ant-design/issues/3745
// https://webpack.js.org/guides/dependency-management/#require-context
// 通过正则批量匹配引入相应的文件模块。
// 第二个参数指包含子目录
const req = require.context('./components', true, /^\.\/[^_][\w-]+\/style\/index\.tsx?$/);

req.keys().forEach((mod) => {
  let v = req(mod);
  if (v && v.default) {
    v = v.default;
  }
  // 匹配类似 './input/index.tsx'
  const match = mod.match(/^\.\/([^_][\w-]+)\/index\.tsx?$/);
  if (match && match[1]) {
    if (match[1] === 'message' || match[1] === 'notification') {
      // message & notification should not be capitalized
      exports[match[1]] = v;
    } else {
      exports[camelCase(match[1])] = v;
    }
  }
});

module.exports = require('./components');

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章