1: the nature of the JSX

What is the JSX?

In React, you’ll be familiar with this syntax

class App extends React.Component {
    constructor() {
        super(a);        this.state = 
        }
 }  render() {  return (  <div>  <div class="header">  <h1 title="Title">I am heading</h1>  </div>  <div class="content">  <h1 title="Content">I am content</h1>  <button>Button 1</button>  <button>Button 2</button>  </div>  <div class="footer">  <h1 title="The bottom">I was at the bottom of the</h1>  </div>  </div>  )  } } Copy the code

This part of the return in the Render function is JSX syntax

JSX is actually the syntactic sugar for React. CreateElement

Return JSX = JSX {react} Return JSX = JSX {react}

return /*#__PURE__*/React.createElement("div".null./*#__PURE__*/React.createElement("div", {
    className: "header"
}, /*#__PURE__*/React.createElement("h1", {
    title: "\u6807\u9898"
}, "\u6211\u662F\u6807\u9898")), /*#__PURE__*/React.createElement("div", {
 className: "content" }, /*#__PURE__*/React.createElement("h2".null."\u6211\u662F\u9875\u9762\u7684\u5185\u5BB9/*#__PURE__*/React.createElement("button", null, "\u6309\u94AE"), /*#__PURE__*/RecreateElement("button", null, "+1"), /*#__PURE__*/React.createElement("a", {  href: "http://www.baidu.com" }, "\u767E\u5EA6\u4E00\u4E0B")), /*#__PURE__*/React.createElement("div", {  className: "footer" }, /*#__PURE__*/React.createElement("p".null."\u6211\u662F\u5C3E\u90E8\u7684\u5185\u5BB9"))); Copy the code

/*#__PURE__*/ is some comment, let’s remove it

return React.createElement("div".null, React.createElement("div", {
    className: "header"
}, React.createElement("h1", {
    title: "\u6807\u9898"
}, "\u6211\u662F\u6807\u9898")), React.createElement("div", {
 className: "content" }, React.createElement("h2".null."\u6211\u662F\u9875\u9762\u7684\u5185\u5BB9"), RecreateElement("button".null."\u6309\u94AE"), React.createElement("button".null."+1React.createElement("a", {  href: "http://www.baidu.com" }, "\u767E\u5EA6\u4E00\u4E0B")), React.createElement("div", {  className: "footer" }, React.createElement("p".null."\u6211\u662F\u5C3E\u90E8\u7684\u5185\u5BB9"))); Copy the code

React. CreateElement JSX is the syntax sugar for the React. CreateElement function. You can only write React code in the form of React. CreateElement. The current version of JSX uses Babel to convert React. This is why Babel is introduced when we write React code without using the React scaffolding create-react-app

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
// Writing React code without the React scaffolding introduces Babel<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
Copy the code

React. CreateElement = React

You can find the createElement function in the React source code ReactElement. After removing some of the DEV hints and comments, you get the following code

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

  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;  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];  }  props.children = childArray;  }   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,  self,  source,  ReactCurrentOwner.current,  props,  ); } Copy the code

CreateElement needs to pass three parameters:

• Parameter one type: currentReactElementThe type of; If it is a tag element, it is represented as a stringdivIf it’s a component element, use the component name
• Parameter 2 config: allJSXAll attributes inconfigIs stored as properties and values of objects
• Parameter three children: store the content in the label tochildrenArray storage;

Virtual DOM

As you can see from the above source code, ReactElement returns the following code

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

React uses the ReactElement object to form a JavaScript object tree. And this JavaScript object tree is the legendary Virtual DOM

conclusion

React JSX code and React JSX code JSX –> react.createElement () –> JS object tree (virtual DOM) –> react.render () function maps the browser-recognized real DOM