import React from 'react';
import ReactDOM from 'react-dom';
// import PropTypes from 'props-type';

const Hello = ({ name }) => <h1>Hello {name}!</h1>;

class ShowMyError extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: false };
  }

  componentDidCatch(error, info) {
    this.setState({ error, info });
  }

  render() {
    if (this.state.error) {
      return (
        <div>
          <h1>
            Error AGAIN: {this.state.error.toString()}
          </h1>
          {this.state.info &&
            this.state.info.componentStack.split("\n").map(i => {
              return (
                <div key={i}>
                  {i}
                </div>
              );
            })}
        </div>
      );
    }
    return this.props.children;
  }
}

class Broken extends React.Component {
  constructor(props) {
    super(props);
    this.state = { throw: false, count: 0 };
  }

  render() {
    if (this.state.throw) {
      throw new Error("YOLO");
    }

    return (
      <div>
        <button
          onClick={e => {
            this.setState({ throw: true });
          }}
        >
          button will render error.
        </button>

        <button onClick={e => {
          this.setState(({ count }) => ({
            count: count + 1
          }));
        }}>button will not throw</button>

        <div>
          {"All good here. Count: "}{this.state.count}
        </div>
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    const styles = {
      fontFamily: "sans-serif",
      textAlign: "center"
    };
    return (
      <div style={styles}>
        <Hello name="ShowMyError" />
        <h2>
          Start clicking to see some {"\u2728"}magic{"\u2728"}
        </h2>
        <ShowMyError>
          <Broken />
        </ShowMyError>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

function getOptionValue(props) {
    //typeof props.value === 'undefined'
    return isDefined(props.value)
        ? props.value
        : props.children[0].text
}
function isDefined(a) {
    return !(a === null || a === undefined)
}
export function postUpdateSelectedOptions(vnode) {
    var props = vnode.props,
        multiple = !!props.multiple,
        value = isDefined(props.value)
            ? props.value
            : isDefined(props.defaultValue)
                ? props.defaultValue
                : multiple
                    ? []
                    : '',
        options = [];
    collectOptions(vnode, props, options)
    if (multiple) {
        updateOptionsMore(vnode, options, options.length, value)
    } else {
        updateOptionsOne(vnode, options, options.length, value)
    }

}

function collectOptions(vnode, props, ret) {
    var arr = props.children
    for (var i = 0, n = arr.length; i < n; i++) {
        var el = arr[i]
        if (el.type === 'option') {
            ret.push(el)
        } else if (el.type === 'optgroup') {
            collectOptions(el, el.props, ret)
        }
    }
}

function updateOptionsOne(vnode, options, n, propValue) {
    // Do not set `select.value` as exact behavior isn't consistent across all
    // browsers for all cases.
    var selectedValue = '' + propValue;
    for (let i = 0; i < n; i++) {
        let option = options[i]
        let value = getOptionValue(option.props)
        if (value === selectedValue) {
            setDomSelected(option, true)
            return
        }
    }
    if (n) {
        setDomSelected(options[0], true)
    }

}

function updateOptionsMore(vnode, options, n, propValue) {

    var selectedValue = {}
    try {
        for (let i = 0; i < propValue.length; i++) {
            selectedValue['&' + propValue[i]] = true
        }
    } catch (e) {
        /* istanbul ignore next */
        console.warn('<select multiple="true"> 的value应该对应一个字符串数组')
    }
    for (let i = 0; i < n; i++) {
        let option = options[i]
        let value = getOptionValue(option.props)
        let selected = selectedValue.hasOwnProperty('&' + value)
        setDomSelected(option, selected)

    }
}

function setDomSelected(option, selected) {
    if (option._hostNode) {
        option._hostNode.selected = selected
    }
}

//react的单向流动是由生命周期钩子的setState选择性调用（不是所有钩子都能用setState）,受控组件，事务机制

function stopUserInput(e) {
    var target = e.target
    var name = e.type === 'textarea'
        ? 'innerHTML'
        : 'value'
    target[name] = target._lastValue
}

function stopUserClick(e) {
    e.preventDefault()
}

export function processFormElement(vnode, dom, props) {
    var domType = dom.type
    if (/text|password|number|date|time|color|month/.test(domType)) {
        if ('value' in props && !hasOtherControllProperty(props, textMap)) {
            console.warn(`你为${domType}元素指定了value属性，但是没有提供另外的${Object.keys(textMap)}
           等用于控制value变化的属性，那么它是一个非受控组件，用户无法通过输入改变元素的value值`)
            dom.oninput = stopUserInput
        }
    } else if (/checkbox|radio/.test(domType)) {
        if ('checked' in props && !hasOtherControllProperty(props, checkedMap)) {
            console.warn(`你为${domType}元素指定了value属性，但是没有提供另外的${Object.keys(checkedMap)}
           等用于控制value变化的属性，那么它是一个非受控组件，用户无法通过输入改变元素的value值`)
            dom.onclick = stopUserClick
        }
    } else if (/select/.test(domType)) {
        if (!('value' in props || 'defaultValue' in props)) {
            console.warn(`select元素必须指定value或defaultValue属性`)
        }
        postUpdateSelectedOptions(vnode)
    }
}

var textMap = {
    onChange: 1,
    onInput: 1,
    readOnly: 1,
    disabled: 1
}
var checkedMap = {
    onChange: 1,
    onClick: 1,
    readOnly: 1,
    disabled: 1
}

function hasOtherControllProperty(props, map) {
    for (var i in props) {
        if (map[i]) {
           return true
        }
    }
    return false
}

export function processFormElement(vnode, dom, props) {
    var domType = dom.type
    var duplexType = duplexMap[domType]
    if (duplexType) {
        var data = duplexData[duplexType]
        var duplexProp = data[0]
        var keys = data[1]
        var eventName = data[2]
        if (duplexProp in props && !hasOtherControllProperty(props, keys)) {
            console.warn(`你为${vnode.type}[type=${domType}]元素指定了${duplexProp}属性，但是没有提供另外的${Object.keys(keys)}
           等用于控制${duplexProp}变化的属性，那么它是一个非受控组件，用户无法通过输入改变元素的${duplexProp}值`)
            dom[eventName] = data[3]
        }
        if (duplexType === 3) {
            postUpdateSelectedOptions(vnode)
        }

    }

}

function hasOtherControllProperty(props, keys) {
    for (var key in props) {
        if (keys[key]) {
            return true
        }
    }
}
var duplexMap = {
    color: 1,
    date: 1,
    datetime: 1,
    'datetime-local': 1,
    email: 1,
    month: 1,
    number: 1,
    password: 1,
    range: 1,
    search: 1,
    tel: 1,
    text: 1,
    time: 1,
    url: 1,
    week: 1,
    textarea: 1,
    checkbox: 2,
    radio: 2,
    'select-one': 3,
    'select-multiple': 3
}


function preventUserInput(e) {
    var target = e.target
    var name = e.type === 'textarea' ?
        'innerHTML' :
        'value'
    target[name] = target._lastValue
}

function preventUserClick(e) {
    e.preventDefault()
}

function preventUserChange(e) {
    var target = e.target
    var value = target._lastValue
    var options = target.options
    if (target.multiple) {
        updateOptionsMore(options, options.length, value)
    } else {
        updateOptionsOne(options, options.length, value)
    }
}

var duplexData = {
    1: ['value', {
        onChange: 1,
        onInput: 1,
        readOnly: 1,
        disabled: 1
    }, 'oninput', preventUserInput],
    2: ['checked', {
        onChange: 1,
        onClick: 1,
        readOnly: 1,
        disabled: 1
    }, 'onclick', preventUserClick],
    3: ['value', {
        onChange: 1,
        disabled: 1
    }, 'onchange', preventUserChange]
}


export function postUpdateSelectedOptions(vnode) {
    var props = vnode.props,
        multiple = !!props.multiple,
        value = isDefined(props.value) ?
        props.value :
        isDefined(props.defaultValue) ?
        props.defaultValue :
        multiple ? [] :
        '',
        options = [];
    collectOptions(vnode, props, options)
    if (multiple) {
        updateOptionsMore(options, options.length, value)
    } else {
        updateOptionsOne(options, options.length, value)
    }

}

function isDefined(a) {
    return !(a === null || a === void 666)
}

/**
 * 收集虚拟DOM select下面的options元素，如果是真实DOM直接用select.options
 * 
 * @param {VNode} vnode 
 * @param {any} props 
 * @param {Array} ret 
 */
function collectOptions(vnode, props, ret) {
    var arr = props.children
    for (var i = 0, n = arr.length; i < n; i++) {
        var el = arr[i]
        if (el.type === 'option') {
            ret.push(el)
        } else if (el.type === 'optgroup') {
            collectOptions(el, el.props, ret)
        }
    }
}


function updateOptionsOne(options, n, propValue) {
    var selectedValue = '' + propValue;
    for (let i = 0; i < n; i++) {
        let option = options[i]
        let value = getOptionValue(option, option.props)
        if (value === selectedValue) {
            getOptionSelected(option, true)
            return
        }
    }
    if (n) {
        getOptionSelected(options[0], true)
    }
}

function updateOptionsMore(options, n, propValue) {
    var selectedValue = {}
    try {
        for (let i = 0; i < propValue.length; i++) {
            selectedValue['&' + propValue[i]] = true
        }
    } catch (e) {
        /* istanbul ignore next */
        console.warn('<select multiple="true"> 的value应该对应一个字符串数组')
    }
    for (let i = 0; i < n; i++) {
        let option = options[i]
        let value = getOptionValue(option, option.props)
        let selected = selectedValue.hasOwnProperty('&' + value)
        getOptionSelected(option, selected)
    }
}

function getOptionValue(option, props) {
    if (!props) {
        return getDOMOptionValue(option)
    }
    return props.value === undefined ? props.children[0].text : props.value
}

function getDOMOptionValue(node) {
    if (node.hasAttribute && node.hasAttribute('value')) {
        return node.getAttribute('value')
    }
    var attr = node.getAttributeNode('value')
    if (attr && attr.specified) {
        return attr.value
    }
    return node.innerHTML.trim()
}


function getOptionSelected(option, selected) {
    var dom = option._hostNode || option
    dom.selected = selected
}

function updateChildren(lastVnode, nextVnode, parentNode, context, mountQueue) {
    let lastChildren = lastVnode.vchildren,
        nextChildren = flattenChildren(nextVnode),//nextVnode.props.children;
        childNodes = parentNode.childNodes,
        hashcode = {},
        mountAll = mountQueue.mountAll;
    if (nextChildren.length == 0) {
        lastChildren
            .forEach(function (el) {
                var node = el._hostNode;
                if (node) {
                    removeDOMElement(node);
                }
                disposeVnode(el);
            });
        return;
    }


    lastChildren.forEach(function (el) {
        let key = el.type + (el.key || "");
        if (el._disposed) {
            return;
        }
        let list = hashcode[key];
        if (list) {
            list.push(el);
        } else {
            hashcode[key] = [el];
        }
    });
    nextChildren.forEach(function (el) {
        let key = el.type + (el.key || "");
        let list = hashcode[key];
        if (list) {
            let old = list.shift();
            if (old) {
                el.old = old;
                if (!list.length) {
                    delete hashcode[key];
                }
            }
        }
    });
    for (let i in hashcode) {
        let list = hashcode[i];
        if (Array.isArray(list)) {
            list
                .forEach(function (el) {
                    let node = el._hostNode;
                    if (node) {
                        removeDOMElement(node);
                    }
                    disposeVnode(el);
                });
        }
    }

    var beforeDOM;

    for (let i = nextChildren.length - 1; i >= 0; i--) {
        let el = nextChildren[i],
            old = el.old,
            dom,
            queue = mountAll
                ? mountQueue
                : [];
        if (old) {
            delete el.old;
            if (el === old && old._hostNode && !contextHasChange) {
                //cloneElement
                dom = old._hostNode;
                let curDOM = childNodes[i];
                if (dom !== curDOM && curDOM) {
                    parentNode.replaceChild(dom, curDOM);
                }
            } else {
                dom = updateVnode(old, el, context, queue);
                if (!dom) {
                    dom = createDOMElement({ vtype: "#comment", text: "placeholder" });
                    replaceChildDeday([old, el, context, queue], dom, parentNode);
                }
            }
        } else {
            dom = mountVnode(el, context, null, queue);
        }
        if (dom !== beforeDOM) {
            insertDOM(parentNode, dom, beforeDOM);
        }
        beforeDOM = dom;
        if (!mountAll && queue.length) {
            clearRefsAndMounts(queue);
        }
    }
}

function flattenChildren(stack) {
    var lastText,
        child,
        hasText = false,
        children = [];

    while (stack.length) {
        //比较巧妙地判定是否为子数组
        if ((child = stack.pop()) && child.pop) {
            if (child.toJS) {
                //兼容Immutable.js
                child = child.toJS();
            }
            for (let i = 0; i < child.length; i++) {
                stack[stack.length] = child[i];
            }
        } else {
            // eslint-disable-next-line
            var childType = typeNumber(child);

            if (childType < 3 // 0, 1, 2
            ) {
                continue;
            }

            if (childType < 6) {
                //!== 'object' 不是对象就是字符串或数字
                if (hasText) {
                    lastText = children[0] = child + lastText;
                    continue;
                }
                child = child + ""
                lastText = child
                hasText = true
            } else {
                hasText = lastText = null;
            }

            children.unshift(child);
        }
    }
    if (!children.length) {
        children = EMPTY_CHILDREN;
    }
    return children;
}

   map(children, callback, context) {
        var ret = [];
        _flattenChildren(children, "").forEach(function(old, index) {
            let el = callback.call(context, old, index);
            if (el === null) {
                return;
            }
            if (el.vtype) {
                //如果返回的el等于old,还需要使用原来的key, _prefix
                let curKey = el && el.key !== null ? el.key : null;
                let oldKey = old && old.key !== null ? old.key : null;
                let oldFix = old && old._prefix,
                    key;
                if (oldKey && curKey) {
                    key = oldFix + "$" + oldKey;
                    if (oldKey !== curKey) {
                        key = curKey + "/" + key;
                    } 
                } else {
                    key = curKey || oldKey;
                    if (key) {
                        if (oldFix) {
                            key = oldFix + "$" + key;
                        }
                    } else {
                        key = oldFix || "." + index;
                    }
                }
                key = key.replace(/\d+\$/, "$");
                ret.push(cloneElement(el, { key }));
            } else if (el.type) {
                ret.push(Object.assign({}, el));
            } else {
                ret.push(el);
            }
        });
        return ret;
    },

import { operateChildren } from "./createElement";
import { cloneElement } from "./cloneElement";
import { extend } from "./util";

export const Children = {
    only(children) {
        //only方法接受的参数只能是一个对象，不能是多个对象（数组）。
        if (children && children.vtype) {
            return children;
        }
        throw new Error("expect only one child");
    },
    count(children) {
        if (children == null) {
            return 0;
        }
        var index = 0;
        operateChildren(children, false, function() {
            index++;
        });
        return index;
    },
    map(children, callback, context) {
        if (children == null) {
            return children;
        }
        var index = 0;
        return operateChildren(children, true, function(ret, old, keeper) {
            if (old == null || old === false || old === true) {
                old = null;
            } else if (!old._prefix) {
                old._prefix = "." + keeper.unidimensionalIndex;
                keeper.unidimensionalIndex++;
            }
            let outerIndex = index;
            let el = callback.call(context, old, index++);
            if (el == null) {
                return;
            }
            if (el.vtype) {
                //如果返回的el等于old,还需要使用原来的key, _prefix
                var key = computeKey(old, el, outerIndex);
                ret.push(cloneElement(el, { key }));
            } else if (el.type) {
                ret.push(extend({}, el));
            } else {
                ret.push(el);
            }
        });
    },
    forEach(children, callback, context) {
        if (children != null) {
            var index = 0;
            operateChildren(children, false, function(array, el) {
                if (el == null || el === false || el === true) {
                    el = null;
                }
                callback.call(context, el, index++);
            });
        }
    },
    toArray: function(children) {
        if (children == null) {
            return [];
        }
        return Children.map(children, function(el) {
            return el;
        });
    }
};
var rthimNumer = /\d+\$/;
function computeKey(old, el, index) {
    let curKey = el && el.key != null ? escapeKey(el.key) : null;
    let oldKey = old && old.key != null ? escapeKey(old.key) : null;
    let oldFix = old && old._prefix,
        key;
    if (oldKey && curKey) {
        key = oldFix + "$" + oldKey;
        if (oldKey !== curKey) {
            key = curKey + "/" + key;
        }
    } else {
        key = curKey || oldKey;
        if (key) {
            if (oldFix) {
                key = oldFix + "$" + key;
            }
        } else {
            key = oldFix || "." + index;
        }
    }
    return key.replace(rthimNumer, "$");
}
function escapeKey(key) {
    return String(key).replace(/[=:]/g, escaperFn);
}
var escaperLookup = {
    "=": "=0",
    ":": "=2"
};
function escaperFn(match) {
    return escaperLookup[match];
}

export function operateChildren(children, isMap, callback) {
    let ret = [],
        keeper = {
            unidimensionalIndex: 0
        },
        child,
        iteractorFn,
        temp = Array.isArray(children) ? children.slice(0) : [children];
    while (temp.length) {
        if ((child = temp.shift()) && (child.shift || (iteractorFn = getIteractor(child)))) {
            //比较巧妙地判定是否为子数组
            if (iteractorFn) {
                //兼容Immutable.js, Map, Set
                child = callIteractor(iteractorFn, child);
                iteractorFn = false;
                temp.unshift.apply(temp, child);
                continue;
            }
            if (isMap) {
                if (!child._prefix) {
                    child._prefix = "." + keeper.unidimensionalIndex;
                    keeper.unidimensionalIndex++; //维护第一层元素的索引值
                }
                for (let i = 0; i < child.length; i++) {
                    if (child[i]) {
                        child[i]._prefix = child._prefix + ":" + i;
                    }
                }
            }
            temp.unshift.apply(temp, child);
        } else {
            if (typeNumber(child) === 8  && !child.type) {
                throw Error("invalid type");
            }
            callback(ret, child, keeper);
        }
    }
    return ret;
}

 var ReactComponent = React.Component;

  var _assign = Object.assign;

  var _invariant = function _invariant(condition, format, a, b, c, d, e, f) {
    if (!condition) {
      var error;
      if (format === undefined) {
        error = new Error(
          "Minified exception occurred; use the non-minified dev environment " +
            "for the full error message and additional helpful warnings."
        );
      } else {
        var args = [a, b, c, d, e, f];
        var argIndex = 0;
        error = new Error(
          format.replace(/%s/g, function() {
            return args[argIndex++];
          })
        );
        error.name = "Invariant Violation";
      }

      error.framesToPop = 1; // we don't care about invariant's own frame
      throw error;
    }
  };

  var MIXINS_KEY = "mixins";

  /**
 * Policies that describe methods in `ReactClassInterface`.
 */

  var injectedMixins = [];

  var ReactClassInterface = {
    mixins: "DEFINE_MANY",
    statics: "DEFINE_MANY",
    propTypes: "DEFINE_MANY",
    contextTypes: "DEFINE_MANY",
    childContextTypes: "DEFINE_MANY",
    getDefaultProps: "DEFINE_MANY_MERGED",
    getInitialState: "DEFINE_MANY_MERGED",
    getChildContext: "DEFINE_MANY_MERGED",
    render: "DEFINE_ONCE",
    componentWillMount: "DEFINE_MANY",
    componentDidMount: "DEFINE_MANY",
    componentWillReceiveProps: "DEFINE_MANY",
    shouldComponentUpdate: "DEFINE_ONCE",
    componentWillUpdate: "DEFINE_MANY",
    componentDidUpdate: "DEFINE_MANY",
    componentWillUnmount: "DEFINE_MANY",
    updateComponent: "OVERRIDE_BASE"
  };

  /**
 * Mapping from class specification keys to special processing functions.
 *
 * Although these are declared like instance properties in the specification
 * when defining classes using `React.createClass`, they are actually static
 * and are accessible on the constructor instead of the prototype. Despite
 * being static, they must be defined outside of the "statics" key under
 * which all other static methods are defined.
 */
  var RESERVED_SPEC_KEYS = {
    displayName: function displayName(Constructor, _displayName) {
      return (Constructor.displayName = _displayName);
    },
    mixins: function mixins(Constructor, _mixins) {
      if (_mixins) {
        for (var i = 0; i < _mixins.length; i++) {
          mixSpecIntoComponent(Constructor, _mixins[i]);
        }
      }
    },
    childContextTypes: function childContextTypes(
      Constructor,
      _childContextTypes
    ) {
      return (Constructor.childContextTypes = _assign(
        {},
        Constructor.childContextTypes,
        _childContextTypes
      ));
    },
    contextTypes: function contextTypes(Constructor, _contextTypes) {
      return (Constructor.contextTypes = _assign(
        {},
        Constructor.contextTypes,
        _contextTypes
      ));
    },
    /**
   * Special case getDefaultProps which should move into statics but requires
   * automatic merging.
   */
    getDefaultProps: function getDefaultProps(Constructor, _getDefaultProps) {
      if (Constructor.getDefaultProps) {
        Constructor.getDefaultProps = createMergedResultFunction(
          Constructor.getDefaultProps,
          _getDefaultProps
        );
      } else {
        Constructor.getDefaultProps = _getDefaultProps;
      }
    },

    propTypes: function propTypes(Constructor, _propTypes) {
      Constructor.propTypes = _assign({}, Constructor.propTypes, _propTypes);
    },
    statics: function statics(Constructor, _statics) {
      mixStaticSpecIntoComponent(Constructor, _statics);
    },
    autobind: function autobind() {}
  };

  function validateMethodOverride(isAlreadyDefined, name) {
    var specPolicy = ReactClassInterface.hasOwnProperty(name)
      ? ReactClassInterface[name]
      : null;

    // Disallow overriding of base class methods unless explicitly allowed.
    if (ReactClassMixin.hasOwnProperty(name)) {
      _invariant(
        specPolicy === "OVERRIDE_BASE",
        "ReactClassInterface: You are attempting to override " +
          "`%s` from your class specification. Ensure that your method names " +
          "do not overlap with React methods.",
        name
      );
    }

    // Disallow defining methods more than once unless explicitly allowed.
    if (isAlreadyDefined) {
      _invariant(
        specPolicy === "DEFINE_MANY" || specPolicy === "DEFINE_MANY_MERGED",
        "ReactClassInterface: You are attempting to define " +
          "`%s` on your component more than once. This conflict may be due " +
          "to a mixin.",
        name
      );
    }
  }

  /**
 * Mixin helper which handles policy validation and reserved
 * specification keys when building React classes.
 */
  function mixSpecIntoComponent(Constructor, spec) {
    if (!spec) {
      return;
    }

    _invariant(
      typeof spec !== "function",
      "ReactClass: You're attempting to " +
        "use a component class or function as a mixin. Instead, just use a " +
        "regular object."
    );

    var proto = Constructor.prototype;
    var autoBindPairs = proto.__reactAutoBindPairs;

    // By handling mixins before any other properties, we ensure the same
    // chaining order is applied to methods with DEFINE_MANY policy, whether
    // mixins are listed before or after these methods in the spec.
    if (spec.hasOwnProperty(MIXINS_KEY)) {
      RESERVED_SPEC_KEYS.mixins(Constructor, spec.mixins);
    }

    for (var name in spec) {
      if (!spec.hasOwnProperty(name)) {
        continue;
      }

      if (name === MIXINS_KEY) {
        // We have already handled mixins in a special case above.
        continue;
      }

      var property = spec[name];
      var isAlreadyDefined = proto.hasOwnProperty(name);
      validateMethodOverride(isAlreadyDefined, name);
      if (RESERVED_SPEC_KEYS.hasOwnProperty(name)) {
        RESERVED_SPEC_KEYS[name](Constructor, property);
      } else {
        // Setup methods on prototype:
        // The following member methods should not be automatically bound:
        // 1. Expected ReactClass methods (in the "interface").
        // 2. Overridden methods (that were mixed in).
        var isReactClassMethod = ReactClassInterface.hasOwnProperty(name);
        var isFunction = typeof property === "function";
        var shouldAutoBind =
          isFunction &&
          !isReactClassMethod &&
          !isAlreadyDefined &&
          spec.autobind !== false;

        if (shouldAutoBind) {
          autoBindPairs.push(name, property);
          proto[name] = property;
        } else {
          if (isAlreadyDefined) {
            var specPolicy = ReactClassInterface[name];

            // These cases should already be caught by validateMethodOverride.
            _invariant(
              isReactClassMethod &&
                (specPolicy === "DEFINE_MANY_MERGED" ||
                  specPolicy === "DEFINE_MANY"),
              "ReactClass: Unexpected spec policy %s for key %s " +
                "when mixing in component specs.",
              specPolicy,
              name
            );

            // For methods which are defined more than once, call the existing
            // methods before calling the new property, merging if appropriate.
            if (specPolicy === "DEFINE_MANY_MERGED") {
              console.log(name, "createMergedResultFunction");

              proto[name] = createMergedResultFunction(proto[name], property);
            } else if (specPolicy === "DEFINE_MANY") {
              proto[name] = createChainedFunction(proto[name], property);
            }
          } else {
            proto[name] = property;
            {
              // Add verbose displayName to the function, which helps when looking
              // at profiling tools.
              if (typeof property === "function" && spec.displayName) {
                proto[name].displayName = spec.displayName + "_" + name;
              }
            }
          }
        }
      }
    }
  }

  function mixStaticSpecIntoComponent(Constructor, statics) {
    if (!statics) {
      return;
    }
    for (var name in statics) {
      var property = statics[name];
      if (!statics.hasOwnProperty(name)) {
        continue;
      }

      var isReserved = name in RESERVED_SPEC_KEYS;
      _invariant(
        !isReserved,
        "ReactClass: You are attempting to define a reserved " +
          'property, `%s`, that shouldn\'t be on the "statics" key. Define it ' +
          "as an instance property instead; it will still be accessible on the " +
          "constructor.",
        name
      );

      var isInherited = name in Constructor;
      _invariant(
        !isInherited,
        "ReactClass: You are attempting to define " +
          "`%s` on your component more than once. This conflict may be " +
          "due to a mixin.",
        name
      );
      Constructor[name] = property;
    }
  }

  function mergeIntoWithNoDuplicateKeys(one, two) {
    _invariant(
      one &&
        two &&
        (typeof one === "undefined" ? "undefined" : _typeof(one)) ===
          "object" &&
        (typeof two === "undefined" ? "undefined" : _typeof(two)) === "object",
      "mergeIntoWithNoDuplicateKeys(): Cannot merge non-objects."
    );

    for (var key in two) {
      if (two.hasOwnProperty(key)) {
        one[key] = two[key];
      }
    }
    return one;
  }

  function createMergedResultFunction(one, two) {
    return function mergedResult() {
      var a = one.apply(this, arguments);
      var b = two.apply(this, arguments);
      if (a == null) {
        return b;
      } else if (b == null) {
        return a;
      }
      var c = {};
      mergeIntoWithNoDuplicateKeys(c, a);
      mergeIntoWithNoDuplicateKeys(c, b);
      return c;
    };
  }

  function createChainedFunction(one, two) {
    return function chainedFunction() {
      one.apply(this, arguments);
      two.apply(this, arguments);
    };
  }

  function bindAutoBindMethod(component, method) {
    var boundMethod = method.bind(component);
    return boundMethod;
  }

  function bindAutoBindMethods(component) {
    var pairs = component.__reactAutoBindPairs;
    for (var i = 0; i < pairs.length; i += 2) {
      var autoBindKey = pairs[i];
      var method = pairs[i + 1];
      component[autoBindKey] = bindAutoBindMethod(component, method);
    }
  }

  var ReactClassMixin = {
    /**
   * TODO: This will be deprecated because state should always keep a consistent
   * type signature and the only use case for this, is to avoid that.
   */
    replaceState: function replaceState(newState, callback) {
      // this.updater.enqueueReplaceState(this, newState, callback);
    },

    /**
   * Checks whether or not this composite component is mounted.
   * @return {boolean} True if mounted, false otherwise.
   * @protected
   * @final
   */
    isMounted: function isMounted() {
      return !!this._rendered && this._rendered._hostNode;
    }
  };

  var ReactClassComponent = function ReactClassComponent() {};
  _assign(
    ReactClassComponent.prototype,
    ReactComponent.prototype,
    ReactClassMixin
  );

  /**
 * Creates a composite component class given a class specification.
 * See https://facebook.github.io/react/docs/top-level-api.html#react.createclass
 *
 * @param {object} spec Class specification (which must define `render`).
 * @return {function} Component constructor function.
 * @public
 */
  function newCtor(className, ReactComponent, bindAutoBindMethods) {
    var curry = Function(
      "ReactComponent",
      "bindAutoBindMethods",
      `return function ${className}(props, context) {
    ReactComponent.call(this, props, context);
    var initialState = this.getInitialState ? this.getInitialState() : {};

    this.state = initialState;
    // This constructor gets overridden by mocks. The argument is used
    // by mocks to assert on what gets mounted.

    // Wire up auto-binding
    if (this.__reactAutoBindPairs.length) {
      bindAutoBindMethods(this);
    }
  };`
    );
    return curry(ReactComponent, bindAutoBindMethods);
  }

  function createClass(spec) {
    // To keep our warnings more understandable, we'll use a little hack here to
    // ensure that Constructor.name !== 'Constructor'. This makes sure we don't
    // unnecessarily identify a class without displayName as 'Constructor'.
    var Constructor = newCtor(
      spec.displayName || "Component",
      ReactComponent,
      bindAutoBindMethods
    );

    Constructor.prototype = new ReactClassComponent();
    Constructor.prototype.constructor = Constructor;
    Constructor.prototype.__reactAutoBindPairs = [];

    injectedMixins.forEach(mixSpecIntoComponent.bind(null, Constructor));

    // mixSpecIntoComponent(Constructor, IsMountedPreMixin);
    mixSpecIntoComponent(Constructor, spec);
    // mixSpecIntoComponent(Constructor, IsMountedPostMixin);

    // Initialize the defaultProps property after all mixins have been merged.
    if (Constructor.getDefaultProps) {
      Constructor.defaultProps = Constructor.getDefaultProps();
    }

    _invariant(
      Constructor.prototype.render,
      "createClass(...): Class specification must implement a `render` method."
    );

    // Reduce time spent doing lookups by setting these on the prototype.
    for (var methodName in ReactClassInterface) {
      if (!Constructor.prototype[methodName]) {
        Constructor.prototype[methodName] = null;
      }
    }

    return Constructor;
  }
  React.createClass = createClass;

export function drainQueue() {
    
    var queue = mainQueue.shift()
    //如果父元素拥有多个子组件，如果第一个组件在mounted/updated钩子里再次更新父元素，
    //那么mainQueue可能没有子数组了，需要置换queue为currentQueue，执行里面的mounted/updated钩子
    if(!queue &&  currentQueue.length){
        queue = currentQueue;
    }
    options.beforePatch();
    //先执行所有元素虚拟DOMrefs方法（从上到下）
    Refs.clearElementRefs();
    let needSort = [],
        unique = {},
        job, updater;

    while( job = queue.shift() ){
        updater = job.host;
        //queue可能中途加入新元素,  因此不能直接使用queue.forEach(fn)
        if (updater._disposed) {
            continue;
        }
        if (!unique[updater._mountOrder]) {
            unique[updater._mountOrder] = 1;
            needSort.push(job);
        }
        // currentQueue = queue;
           
        // var command = job.exec === updater.onUpdate ? "update" : job.exec === updater.onEnd ? "end" : "receive";
        // console.log(updater.name, command,updater._hookName );
        job.exec.call(updater,queue);
        // if(!queue.length){
        /*  while((el =  mainQueue.shift())){
                    if(el.length){
                        queue = el;
                        break;
                    }
                }
           */
        // }
    }

    if (mainQueue.length > 1) {
       mainQueue.push(currentQueue);
    }
    //再执行所有setState/forceUpdate回调，根据从下到上的顺序执行
    needSort.sort(mountSorter).forEach(function(job) {
        var updater = job.host;
        clearArray(updater._pendingCallbacks).forEach(function(fn) {
            fn.call(updater._instance);
        });
    });
    options.afterPatch();
}

if (!this._dirty && (this._dirty = true)) {
      defer(() => {
        this._dirty = false
        options.refreshComponent(this);
      }, 16)
    }

function sameVnode(a, b) {
  return a.type === b.type && a.key === b.key
}
function patchVnode(lastVnode, nextVnode, args) {
  return updateVnode(lastVnode, nextVnode, lastVnode._hostNode, args[0], args[1])
}
function updateChildren(lastVnode, nextVnode, parentNode, parentContext, mountQueue) {
  let newCh = nextVnode.props.children
  let oldCh = lastVnode.props.children
  let oldStartIdx = 0;
  let newStartIdx = 0;
  let oldEndIdx = oldCh.length - 1;
  let oldStartVnode = oldCh[0];
  let oldEndVnode = oldCh[oldEndIdx];
  let newEndIdx = newCh.length - 1;
  let newStartVnode = newCh[0];
  let newEndVnode = newCh[newEndIdx];
  let oldKeyMap, idxInOld, dom, ref, elmToMove;

  var args = [parentContext, mountQueue]
  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {

    if (sameVnode(oldStartVnode, newStartVnode)) {
      dom = patchVnode(oldStartVnode, newStartVnode, args);
      ref = childNodes[newStartIdx]
      if (dom !== ref) {
        parentNode.replaceChild(dom, ref)
        oldStartVnode._hostNode = dom
      }
      oldStartVnode = oldCh[++oldStartIdx];
      newStartVnode = newCh[++newStartIdx];
    } else if (sameVnode(oldEndVnode, newEndVnode)) {
      dom = patchVnode(oldEndVnode, newEndVnode, args);
      ref = childNodes[newEndIdx]
      if (dom !== ref) {
        parentNode.replaceChild(dom, ref)
        oldEndVnode._hostNode = dom
        // insertDOM(parentNode, dom, ref)
      }
      oldEndVnode = oldCh[--oldEndIdx];
      newEndVnode = newCh[--newEndIdx];
    } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
      //如果新的最后一个等于旧的第一个
      dom = patchVnode(oldStartVnode, newEndVnode, args);
      parentNode.insertBefore(dom, oldStartVnode._hostNode.nextSibling)
      //  api.insertBefore(parentNode, oldStartVnode._hostNode as Node,
      // api.nextSibling(oldEndVnode._hostNode as Node));
      oldStartVnode = oldCh[++oldStartIdx];
      newEndVnode = newCh[--newEndIdx];
    } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
      dom = patchVnode(oldEndVnode, newStartVnode, args);
      parentNode.insertBefore(oldEndVnode._hostNode, oldStartVnode._hostNode);
      oldEndVnode = oldCh[--oldEndIdx];
      newStartVnode = newCh[++newStartIdx];
    } else {
      if (oldKeyMap === undefined) {
        oldKeyMap = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
      }
      idxInOld = oldKeyMap[newStartVnode.key];
      if (isUndef(idxInOld)) { // New element
        dom = mountVnode(newStartVnode, parentContext, null, mountQueue)
        parentNode.insertBefore(dom, oldStartVnode._hostNode);
        newStartVnode = newCh[++newStartIdx];
      } else {
        elmToMove = oldCh[idxInOld];
        if (elmToMove.type !== newStartVnode.type) {
          dom = mountVnode(newStartVnode, parentContext, null, mountQueue)
          parentNode.insertBefore(parentNode, dom, oldStartVnode._hostNode);
        } else {
          patchVnode(elmToMove, newStartVnode, mountQueue);
          oldCh[idxInOld] = undefined;
          parentNode.insertBefore(parentNode, (elmToMove._hostNode), oldStartVnode._hostNode);
        }
        newStartVnode = newCh[++newStartIdx];
      }
    }
  }
  if (oldStartIdx > oldEndIdx) {
    let before = newCh[newEndIdx + 1] == null
      ? null
      : newCh[newEndIdx + 1]._hostNode;
    addVnodes(parentNode, before, newCh, newStartIdx, newEndIdx, mountQueue);
  } else if (newStartIdx > newEndIdx) {
    removeVnodes(parentNode, oldCh, oldStartIdx, oldEndIdx);
  }
}