react 源码分析：babel 如何解析 jsx

<div className='box'>  <h1 className='title' style={{'color':'red'}}>React源码解析</h1>  <ul>    <li>第一章</li>    <li>第二章</li>    <li>第三章</li>    <li>第四章</li>  </ul></div>

// packages/react/src/jsx/ReactJSX.jsimport {REACT_FRAGMENT_TYPE} from 'shared/ReactSymbols';import {  jsxWithValidationStatic,  jsxWithValidationDynamic,  jsxWithValidation,} from './ReactJSXElementValidator';import {jsx as jsxProd} from './ReactJSXElement';const jsx = __DEV__ ? jsxWithValidationDynamic : jsxProd;const jsxs = __DEV__ ? jsxWithValidationStatic : jsxProd;const jsxDEV = __DEV__ ? jsxWithValidation : undefined;
export {REACT_FRAGMENT_TYPE as Fragment, jsx, jsxs, jsxDEV};

export function jsx(type, config, maybeKey) {  let propName;
  //标签上的属性集合  const props = {};
  //单独处理key ref  let key = null;  let ref = null;
  if (maybeKey !== undefined) {    key = '' + maybeKey;  }
  if (hasValidKey(config)) {    // 处理合法的key    key = '' + config.key;  }
  if (hasValidRef(config)) {    // 处理合法的ref    ref = config.ref;  }
  // 把属性加到props中  for (propName in config) {    if (      hasOwnProperty.call(config, propName) &&      !RESERVED_PROPS.hasOwnProperty(propName)    ) {      props[propName] = config[propName];    }  }
  // 处理默认props  if (type && type.defaultProps) {    const defaultProps = type.defaultProps;    for (propName in defaultProps) {      if (props[propName] === undefined) {        props[propName] = defaultProps[propName];      }    }  }
  return ReactElement(      type,      key,      ref,      undefined,      undefined,      ReactCurrentOwner.current,      props  )}

const ReactElement = function(type, key, ref, self, source, owner, props) {  const element = {    // 表示是否为ReactElement    $$typeof: REACT_ELEMENT_TYPE,
    // 元素自身属性    type: type,    key: key,    ref: ref,    props: props,
    // Record the component responsible for creating this element.    _owner: owner,  };
  if (__DEV__) {    element._store = {};
    // 开发环境下将_store、_self、_source属性变为不可枚举    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,    });    // 冻结props、element防止被手动修改    if (Object.freeze) {      Object.freeze(element.props);      Object.freeze(element);    }  }
  return element;};

// packages/react/src/ReactElement.jsexport function createElement(type, config, children) {  let propName;
  // 记录标签上的属性集合  const props = {};
  //单独处理key ref  let key = null;  let ref = null;  let self = null;  let source = null;
  // 当config部位null的时候，表示标签上有属性，加到props里面去  if (config != null) {    // 合法的ref才做处理    if (hasValidRef(config)) {      ref = config.ref;
      if (__DEV__) {        warnIfStringRefCannotBeAutoConverted(config);      }    }    if (hasValidKey(config)) {      // 有合法的key才做处理      key = '' + config.key;    }
    // 记录信息用于debug    self = config.__self === undefined ? null : config.__self;    source = config.__source === undefined ? null : config.__source;
    // 处理self，source，key，ref以外的属性，加入props中    for (propName in config) {      if (        hasOwnProperty.call(config, propName) &&        !RESERVED_PROPS.hasOwnProperty(propName)      ) {        props[propName] = config[propName];      }    }  }
  // 处理子节点  const childrenLength = arguments.length - 2;  // 单标签子节点  if (childrenLength === 1) {    props.children = children;    //嵌套子节点  } else if (childrenLength > 1) {    const childArray = Array(childrenLength);    for (let i = 0; i < childrenLength; i++) {      childArray[i] = arguments[i + 2];    }    //开发环境冻结，childArray防止被修改    if (__DEV__) {      if (Object.freeze) {        Object.freeze(childArray);      }    }    props.children = childArray;  }
  // 处理默认props  if (type && type.defaultProps) {    const defaultProps = type.defaultProps;    for (propName in defaultProps) {      if (props[propName] === undefined) {        props[propName] = defaultProps[propName];      }    }  }  if (__DEV__) {    // dev环境下，key 与 ref不挂到props中去    if (key || ref) {      const displayName =        typeof type === 'function'          ? type.displayName || type.name || 'Unknown'          : type;      if (key) {        defineKeyPropWarningGetter(props, displayName);      }      if (ref) {        defineRefPropWarningGetter(props, displayName);      }    }  }  // 调用返回  return ReactElement(    type,    key,    ref,    self,    source,    ReactCurrentOwner.current,    props,  );}

const ReactElement = function(type, key, ref, self, source, owner, props) {  const element = {    // This tag allows us to uniquely identify this as a React Element    $$typeof: REACT_ELEMENT_TYPE,
    // Built-in properties that belong on the element    type: type,    key: key,    ref: ref,    props: props,
    // Record the component responsible for creating this element.    _owner: owner,  };
  if (__DEV__) {    // The validation flag is currently mutative. We put it on    // an external backing store so that we can freeze the whole object.    // This can be replaced with a WeakMap once they are implemented in    // commonly used development environments.    element._store = {};
    // To make comparing ReactElements easier for testing purposes, we make    // the validation flag non-enumerable (where possible, which should    // include every environment we run tests in), so the test framework    // ignores it.    Object.defineProperty(element._store, 'validated', {      configurable: false,      enumerable: false,      writable: true,      value: false,    });    // self and source are DEV only properties.    Object.defineProperty(element, '_self', {      configurable: false,      enumerable: false,      writable: false,      value: self,    });    // Two elements created in two different places should be considered    // equal for testing purposes and therefore we hide it from enumeration.    Object.defineProperty(element, '_source', {      configurable: false,      enumerable: false,      writable: false,      value: source,    });    if (Object.freeze) {      Object.freeze(element.props);      Object.freeze(element);    }  }
  return element;};

// packages/react/src/ReactBaseClasses.jsfunction Component(props, context, updater) {  // 接受各种参数,挂到this上  this.props = props;  this.context = context;  this.refs = emptyObject;  // updater ??   this.updater = updater || ReactNoopUpdateQueue;}
// 原型上挂载了isReactComponent用来区分函数组件与类组件Component.prototype.isReactComponent = {};
//原型上挂载了setState方法用来触发更新Component.prototype.setState = function(partialState, callback) {  invariant(    typeof partialState === 'object' ||      typeof partialState === 'function' ||      partialState == null,    'setState(...): takes an object of state variables to update or a ' +      'function which returns an object of state variables.',  );  // 调用updater上的enqueueSetState方法？？？  this.updater.enqueueSetState(this, partialState, callback, 'setState');};
// 原型上挂载了强制更新的方法Component.prototype.forceUpdate = function(callback) {  this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');};