If the following content involves infringement, please contact me, I will delete this article as soon as possible.
What is JSX?
- The official answer is that JSX is an extension of JS and has all the capabilities of JS
To understand the JSX => DOM process, you need to know the concept of Babel. What is Babel?
- Babel is a tool chain that converts ECMAScript2015+ and above js to lower versions of JS for compatibility with lower versions of browsers and environments
How is JSX converted to DOM
-
You need a long paragraph here, but it doesn’t matter if you don’t understand it. I’ll go into more details below
-
Long words: Babel transforms JSX into es5 code as we know it, The JSX = > the react. CreateElement method (type, element, value, children), after the react. The CreateElement method () will return the react. Element () call, And pass a processed object to react.element(). The react.element returns an element, called the virtual DOM, with render rendering the returned element as the DOM.
-
Is it very messy, we will analyze step by step
-
NO.1, we wrote a JSX and are converting it to ES5 via Babel
As shown in figure, of course, we can see us a simple JSX was transformed into the react. The createElement method (type, the config, value, children) in the form of function, Here, type is the label node, config is the key-value object converted from the label attribute, value is the value, and chilred is the child node.
-
In createElement(), the function does a logical processing on the parameters and finally returns a ReactElement() method, passing in all the parameters, Specific as follows: key, props, ref, type, ReactCurrentOwner. Current, the source, the self. Here is a screenshot from the React source code.
-
ReactElement() reassembles the parameters passed in and returns an object. Here is a snippet of code I extracted from the React source code. The object returned is what we call the virtual DOM.
-
Finally, reactdom.render () renders the returned virtual DOM so that the JSX becomes the real DOM. Here is my printed JSX instance, and you can see the virtual DOM returned by reactElement. Reactdom.render () converts the virtual DOM to the real DOM, not the render() component.
As shown in figure, of course, we can see us a simple JSX was transformed into the react. The createElement method (type, the config, value, children) in the form of function, Here, type is the label node, config is the key-value object converted from the label attribute, value is the value, and chilred is the child node.
Here’s another thing: why don’t we just use CreateElement() instead of JSX?
- Because JSX’s structure is more similar to HTML writing, it is easier to develop