JSX rendering mechanism

1.1, Step 1 Convert JSX syntax to react. createElement(…) based on babel-preset-react-app Format “Element nodes will look like this”

React.createElement("Label name", attribute object, child node content);Copy the code
  • Label name: for example, ul
  • Property object “If there is no property object, the result is null”
  • Anything that has a property has to be an object
  • If there is a child node, pass the text from the element node, and change the element node to createElement.

Execute React. CreateElement (…) Method to generate an object “virtual DOM object -JSX element”

  • Real DOM objects: For example, DOM element objects obtained based on getElementById are real DOM objects that can be placed directly on the page to display the corresponding view
  • Virtual DOM objects: Store information about DOM elements, but are not DOM element objects. They are generally implemented by the framework itself, directly to the browser, the browser is not aware of other objects

Output the JSX element to view its details

console.log(React.createElement("ul".null."\u563B\u563B",
React.createElement("li".null."\u54C8\u54C8"),
React.createElement("li".null."\u563F\u563F")));Copy the code

1.3. Convert the virtual DOM into the real DOM

Render ([jsxObj],[container],[callback]). This method converts the virtual DOM to the real DOM and inserts it into the specified container. Trigger the callback function to execute when done

  • JsxObj Virtual DOM object based on React. CreateElement

  • Container Container “#root”

  • Callback () {DOM (); DOM (); DOM ();