/ / the react/SRC/ReactElement. Js export function createElement method (type, the config, children) {/ / some processing... 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, }; return element; };Copy the code

CreateElement returns ReactElement. CreateElement takes three arguments:

  • type
  • config
  • children

Type: refers to the type of ReactElement, including string, class, funtion, Fragment, etc.

Config: all attributes that are passed in and tied to the current node or component. In the source code, you can see the key in config, and the ref is separated and placed on the ReactElement.

Children: may be one or more. Finally, children will be processed in the props of the ReactElement. Children can be either a single object or an array.

ReactElement is just a container for information that tells subsequent operations about this node:

  • typeType, which determines how to create a node;
  • keyandrefThis particular information;
  • propsNew attribute content;
  • $$typeofUsed to determine whether it belongs toReactElement;

This information is important for building the tree structure of the application later, and React decoups the platform by providing this type of data.