antd源码解析（一）button控件的解析 antd源码分析

先看下antd的button的源码。

'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _extends2 = require('babel-runtime/helpers/extends'); var _extends3 = _interopRequireDefault(_extends2); var _defineProperty2 = require('babel-runtime/helpers/defineProperty'); var _defineProperty3 = _interopRequireDefault(_defineProperty2); var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); var _createClass2 = require('babel-runtime/helpers/createClass'); var _createClass3 = _interopRequireDefault(_createClass2); var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); var _inherits2 = require('babel-runtime/helpers/inherits'); var _inherits3 = _interopRequireDefault(_inherits2); var _react = require('react'); var _react2 = _interopRequireDefault(_react); var _propTypes = require('prop-types'); var _propTypes2 = _interopRequireDefault(_propTypes); var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames); var _omit = require('omit.js'); var _omit2 = _interopRequireDefault(_omit); var _icon = require('../icon'); var _icon2 = _interopRequireDefault(_icon); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : {'default': obj}; }var __rest = undefined && undefined.__rest || function (s, e) { var t = {}; for (var p in s) { if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; } if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0) t[p[i]] = s[p[i]]; } return t; }; var rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/; var isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar); function isString(str) { return typeof str === 'string'; } // Insert one space between two chinese characters automatically. function insertSpace(child, needInserted) { // Check the child if is undefined or null. if (child == null) { return; } var SPACE = needInserted ? ' ' : ''; // strictNullChecks oops. if (typeof child !== 'string' && typeof child !== 'number' && isString(child.type) && isTwoCNChar(child.props.children)) { return _react2['default'].cloneElement(child, {}, child.props.children.split('').join(SPACE)); } if (typeof child === 'string') { if (isTwoCNChar(child)) { child = child.split('').join(SPACE); } return _react2['default'].createElement( 'span', null, child ); } return child; }var Button = function (_React$Component) { (0, _inherits3['default'])(Button, _React$Component); function Button(props) { (0, _classCallCheck3['default'])(this, Button); var _this = (0, _possibleConstructorReturn3['default'])(this, (Button.__proto__ || Object.getPrototypeOf(Button)).call(this, props)); _this.handleClick = function (e) { // Add click effect _this.setState({clicked: true}); clearTimeout(_this.timeout); _this.timeout = setTimeout(function () { return _this.setState({clicked: false}); }, 500); var onClick = _this.props.onClick; if (onClick) { onClick(e); } }; // Handle auto focus when click button in Chrome _this.handleMouseUp = function (e) { if (_this.props.onMouseUp) { _this.props.onMouseUp(e); } }; _this.state = { loading: props.loading }; return _this; }(0, _createClass3['default'])(Button, [ { key: 'componentWillReceiveProps', value: function componentWillReceiveProps(nextProps) { var _this2 = this; var currentLoading = this.props.loading; var loading = nextProps.loading; if (currentLoading) { clearTimeout(this.delayTimeout); } if (typeof loading !== 'boolean' && loading && loading.delay) { this.delayTimeout = setTimeout(function () { return _this2.setState({loading: loading}); }, loading.delay); } else { this.setState({loading: loading}); } } }, { key: 'componentWillUnmount', value: function componentWillUnmount() { if (this.timeout) { clearTimeout(this.timeout); } if (this.delayTimeout) { clearTimeout(this.delayTimeout); } } }, { key: 'render', value: function render() { var _classNames; var _a = this.props, type = _a.type, shape = _a.shape, _a$size = _a.size, size = _a$size === undefined ? '' : _a$size, className = _a.className, htmlType = _a.htmlType, children = _a.children, icon = _a.icon, prefixCls = _a.prefixCls, ghost = _a.ghost, others = __rest(_a, ["type", "shape", "size", "className", "htmlType", "children", "icon", "prefixCls", "ghost"]); var _state = this.state, loading = _state.loading, clicked = _state.clicked; // large => lg // small => smvar sizeCls = ''; switch (size) { case 'large': sizeCls = 'lg'; break; case 'small': sizeCls = 'sm'; default: break; } var classes = (0, _classnames2['default'])(prefixCls, className, (_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls + '-' + type, type), (0, _defineProperty3['default'])(_classNames, prefixCls + '-' + shape, shape), (0, _defineProperty3['default'])(_classNames, prefixCls + '-' + sizeCls, sizeCls), (0, _defineProperty3['default'])(_classNames, prefixCls + '-icon-only', !children && icon && !loading), (0, _defineProperty3['default'])(_classNames, prefixCls + '-loading', loading), (0, _defineProperty3['default'])(_classNames, prefixCls + '-clicked', clicked), (0, _defineProperty3['default'])(_classNames, prefixCls + '-background-ghost', ghost), _classNames)); var iconType = loading ? 'loading' : icon; var iconNode = iconType ? _react2['default'].createElement(_icon2['default'], {type: iconType}) : null; var needInserted = _react2['default'].Children.count(children) === 1 && !iconType; var kids = _react2['default'].Children.map(children, function (child) { return insertSpace(child, needInserted); }); return _react2['default'].createElement( 'button', (0, _extends3['default'])({}, (0, _omit2['default'])(others, ['loading', 'clicked']), { type: htmlType || 'button', className: classes, onMouseUp: this.handleMouseUp, onClick: this.handleClick }), iconNode, kids ); } } ]); return Button; }(_react2['default'].Component); exports['default'] = Button; Button.__ANT_BUTTON = true; Button.defaultProps = { prefixCls: 'ant-btn', loading: false, clicked: false, ghost: false }; Button.propTypes = { type: _propTypes2['default'].string, shape: _propTypes2['default'].oneOf(['circle', 'circle-outline']), size: _propTypes2['default'].oneOf(['large', 'default', 'small']), htmlType: _propTypes2['default'].oneOf(['submit', 'button', 'reset']), onClick: _propTypes2['default'].func, loading: _propTypes2['default'].oneOfType([_propTypes2['default'].bool, _propTypes2['default'].object]), className: _propTypes2['default'].string, icon: _propTypes2['default'].string }; module.exports = exports['default'];

一个按钮控件如此多的代码，看看都吓坏了，如果我们来简化下代码，看下实现的必须代码：

importReact,{ Component }from "React"; function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : {'default': obj}; }var _createClass2 = require('babel-runtime/helpers/createClass'); var _inherits2 = require('babel-runtime/helpers/inherits'); //定义控件名称 var Button = function (_React$Component) { //这句话是必须的如果去掉这句话就会报异常了 _inherits2['default'](Button, _React$Component); console.log("test-----------"); function Button(props) {} //render方法也是必须需要实现的。 _createClass2['default'](Button, [ { key: 'render', value: function render() { return } } ]); return Button; }(React.Component); export default Button;

代码分析：

(0, _extends3['default'])({}, (0, _omit2['default'])(others, ['loading', 'clicked']), { type: htmlType || 'button', className: classes, onMouseUp: this.handleMouseUp, onClick: this.handleClick }),

其实就是等价于

_extends3['default']({}, (0, _omit2['default'])(others, ['loading', 'clicked']), { type: htmlType || 'button', className: classes, onMouseUp: this.handleMouseUp, onClick: this.handleClick })

在组件定义时会调用下面该语句，而且不能少。

_inherits2['default'](Button, _React$Component);

其实就是调用了该函数

exports.default = function (subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + (typeof superClass === "undefined" ? "undefined" : (0, _typeof3.default)(superClass))); }subClass.prototype = (0, _create2.default)(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) _setPrototypeOf2.default ? (0, _setPrototypeOf2.default)(subClass, superClass) : subClass.__proto__ = superClass; };

如果看不懂该代码，就可以理解为：定义了Button对象，并且该对象继承了React.Component定义的相关方法申明。其实就是等价于：

var Button = class Button extends Component{ ... };

【antd源码解析（一）button控件的解析】_createClass2的源码如下：

exports.default = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; (0, _defineProperty2.default)(target, descriptor.key, descriptor); } }return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

核心的语句。