ReactElement.jsThe whole part

// packages/react/src/ReactElement.js
// Reserved props
const RESERVED_PROPS = {
  key: true.ref: true.__self: true.__source: true};const ReactElement = function(type, key, ref, self, source, owner, props) {
  const element = {
    This tag allows us to uniquely identify it as the React element
    ?typeof: REACT_ELEMENT_TYPE,
    
    // A built-in attribute that belongs to an element
    type: type,
    key: key,
    ref: ref,
    props: props,

    // Record the component responsible for creating this element.
    _owner: owner,
  };

  if (__DEV__) {/ *... * /}

  return element;
} 

export function createElement(type, config, children) {
  let propName;

  // Reserved names are extracted
  const props = {};

  let key = null;
  let ref = null;
  let self = null;
  let source = null;

  if(config ! =null) {
    if (hasValidRef(config)) {
      ref = config.ref;
    }
    if (hasValidKey(config)) {
      key = ' ' + config.key;
    }

    self = config.__self === undefined ? null : config.__self;
    source = config.__source === undefined ? null : config.__source;
    // Remaining properties are added to a new props object
    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 {
    const childArray = Array(childrenLength);
    for (let i = 0; i < childrenLength; i++) {
      childArray[i] = arguments[i + 2];
    }
    if (__DEV__) { / *... * / }
    props.children = childArray;
  }

  return ReactElement(
    type,
    key,
    ref,
    self,
    source, 
    ReactCurrentOwner.current,
    props
  );
}
Copy the code

parsing

1.ReactElement is created by createElement.

The createElement function accepts three arguments: type, config, and children. Type refers to the type of the ReactElement.

Type type has

• stringdiv 或 pEtc stand for native DOM, calledHostComponent;
• Class type inheritanceComponent 或 PureComponentName of componentClassComponent;
• Approach is toFunctionalComponent;
• Natively providedFragment,AsyncModeEtc are Symbol, will be special treatment;
• The other;

3. Call ReactElement, which returns an element object.

configlogic

if(config ! =null) {if(hasValidRef(config)) {
    ref = config.ref;
  }
  if(hasValidKey(config)){
    key = ' ' + config.key;
  }
  self = config.__self === undefined ? null : config.__self;
  source = config.__source === undefined ? null : config.__source;
  // The remaining properties will be added to the new props object
  for (propName in config) {
    if(hasOwnProperty.call(config, propName) && ! RESERVED_PROPS.hasOwnProperty(propName)) { props[propName] = config[propName]; }}}Copy the code

This code

• They’re all created fromconfigThe incoming,ref 和 keyDon’t andconfigThe variables are processed together, but appear separately as variablesReactElementOn;
• rightref 和 keyValidation is done (no internal implementation is required for this verification method, keeping it clean and easy to read);
• traverseconfigDiscard several built-in attributes (attributes on the cull prototype chain and those specified to be culled) intopropsGo in;

childrenlogic

const childrenLength = arguments.length - 2;
if( childrenLength === 1) {
  props.children = children;
} else {
  const childArray = Array(childrenLength);
  for (let i = 0; i < childrenLength; i++) {
    childArray[i] = arguments[i + 2];
  }
  if (__DEV__) { / *... * / }
  props.children = childArray;
}
Copy the code

The first line shows that the length of the parameter after the second parameter is > 1:

• > 1It means there are multiplechildrenAt this timeprops.childrenIt’s gonna be an array,So the back is rightprops.childrenAnd when you do that, you have to be careful if it’s an arrayOf course, you can use itReact.ChildrenThe API is also used in this articleReact.ChildrenAPI to explain;
• = = = 1It’s an object;

The return value

const ReactElement = function(type, key, ref, self, source, owner, props) {
  const element = {
    This tag allows us to uniquely identify it as the React element? type: REACT_ELEMENT_TYPE,// A built-in attribute that belongs to an element
    type: type,
    key: key,
    ref: ref,
    props: props,

    // Record the component responsible for creating this element.
    _owner: owner,
  };

  if (__DEV__) {/ *... * /}

  return element;
} 
Copy the code

The core is passing, right? Type to recognize that this is a ReactElement, and you’ll see a lot of similar types later.

Note:
written via JSX stands for ReactElement and APP stands for React Component.

The content of this section can be drawn as a flow

You can…

React source code analysis overview

React.Children React