import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class App extends Component {
  render() {
    return <div>hello, world</div>;
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

// import React, { Component } from 'react';
import { Component } from 'react'; // 去掉 React 的引用
import ReactDOM from 'react-dom';
export default class App extends Component {
  render() {
    return <div>hello, world</div>;
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

export function createElement(type, config, children) {
  let propName;
  // 記錄標(biāo)簽上的屬性集合
  const props = {};
  let key = null;
  let ref = null;
  let self = null;
  let source = null;
  // config 不為 null 時(shí)，說明標(biāo)簽上有屬性，將屬性添加到 props 中
  // 其中，key 和 ref 為 react 提供的特殊屬性，不加入到 props 中，而是用 key 和 ref 單獨(dú)記錄
  if (config != null) {
    if (hasValidRef(config)) {
      // 有合法的 ref 時(shí)，則給 ref 賦值
      ref = config.ref;
      if (__DEV__) {
        warnIfStringRefCannotBeAutoConverted(config);
      }
    }
    if (hasValidKey(config)) {
      // 有合法的 key 時(shí)，則給 key 賦值
      key = '' + config.key;
    }
    // self 和 source 是開發(fā)環(huán)境下對(duì)代碼在編譯器中位置等信息進(jìn)行記錄，用于開發(fā)環(huán)境下調(diào)試
    self = config.__self === undefined ? null : config.__self;
    source = config.__source === undefined ? null : config.__source;
    // 將 config 中除 key、ref、__self、__source 之外的屬性添加到 props 中
    for (propName in config) {
      if (
        hasOwnProperty.call(config, propName) &&
        !RESERVED_PROPS.hasOwnProperty(propName)
      ) {
        props[propName] = config[propName];
      }
    }
  }
  // 將子節(jié)點(diǎn)添加到 props 的 children 屬性上
  const childrenLength = arguments.length - 2;
  if (childrenLength === 1) {
    // 共 3 個(gè)參數(shù)時(shí)表示只有一個(gè)子節(jié)點(diǎn)，直接將子節(jié)點(diǎn)賦值給 props 的 children 屬性
    props.children = children;
  } else if (childrenLength > 1) {
    // 3 個(gè)以上參數(shù)時(shí)表示有多個(gè)子節(jié)點(diǎn)，將子節(jié)點(diǎn) push 到一個(gè)數(shù)組中然后將數(shù)組賦值給 props 的 children
    const childArray = Array(childrenLength);
    for (let i = 0; i < childrenLength; i++) {
      childArray[i] = arguments[i + 2];
    }
    // 開發(fā)環(huán)境下凍結(jié) childArray，防止被隨意修改
    if (__DEV__) {
      if (Object.freeze) {
        Object.freeze(childArray);
      }
    }
    props.children = childArray;
  }
  // 如果有 defaultProps，對(duì)其遍歷并且將用戶在標(biāo)簽上未對(duì)其手動(dòng)設(shè)置屬性添加進(jìn) props 中
  // 此處針對(duì) class 組件類型
  if (type && type.defaultProps) {
    const defaultProps = type.defaultProps;
    for (propName in defaultProps) {
      if (props[propName] === undefined) {
        props[propName] = defaultProps[propName];
      }
    }
  }
  // key 和 ref 不掛載到 props 上
  // 開發(fā)環(huán)境下若想通過 props.key 或者 props.ref 獲取則 warning
  if (__DEV__) {
    if (key || ref) {
      const displayName =
        typeof type === 'function'
          ? type.displayName || type.name || 'Unknown'
          : type;
      if (key) {
        defineKeyPropWarningGetter(props, displayName);
      }
      if (ref) {
        defineRefPropWarningGetter(props, displayName);
      }
    }
  }
  // 調(diào)用 ReactElement 并返回
  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );
}

const ReactElement = function(type, key, ref, self, source, owner, props) {
  const element = {
    // 用于表示是否為 ReactElement
    $$typeof: REACT_ELEMENT_TYPE,
    // 用于創(chuàng)建真實(shí) dom 的相關(guān)信息
    type: type,
    key: key,
    ref: ref,
    props: props,
    _owner: owner,
  };
  if (__DEV__) {
    element._store = {};
    // 開發(fā)環(huán)境下將 _store、_self、_source 設(shè)置為不可枚舉，提高 element 的比較性能
    Object.defineProperty(element._store, 'validated', {
      configurable: false,
      enumerable: false,
      writable: true,
      value: false,
    });
    Object.defineProperty(element, '_self', {
      configurable: false,
      enumerable: false,
      writable: false,
      value: self,
    });
    Object.defineProperty(element, '_source', {
      configurable: false,
      enumerable: false,
      writable: false,
      value: source,
    });
    // 凍結(jié) element 和 props，防止被手動(dòng)修改
    if (Object.freeze) {
      Object.freeze(element.props);
      Object.freeze(element);
    }
  }
  return element;
};

function Component(props, context, updater) {
  // 接收 props，context，updater 進(jìn)行初始化，掛載到 this 上
  this.props = props;
  this.context = context;
  this.refs = emptyObject;
  // updater 上掛載了 isMounted、enqueueForceUpdate、enqueueSetState 等觸發(fā)器方法
  this.updater = updater || ReactNoopUpdateQueue;
}
// 原型鏈上掛載 isReactComponent，在 ReactDOM.render 時(shí)用于和函數(shù)組件做區(qū)分
Component.prototype.isReactComponent = {};
// 給類組件添加 `this.setState` 方法
Component.prototype.setState = function(partialState, callback) {
  // 驗(yàn)證參數(shù)是否合法
  invariant(
    typeof partialState === 'object' ||
      typeof partialState === 'function' ||
      partialState == null
  );
  // 添加至 enqueueSetState 隊(duì)列
  this.updater.enqueueSetState(this, partialState, callback, 'setState');
};
// 給類組件添加 `this.forceUpdate` 方法
Component.prototype.forceUpdate = function(callback) {
  // 添加至 enqueueForceUpdate 隊(duì)列
  this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');
};