Virtual DOM, JSX

1. **Why React uses JSX instead of native JS? **

   Case 1: Create the following example with JS and JSX

   <div id="test">
       <h1 id="title">Hello,React</h1>
   </divdiv>

   
   

   1. JSX

      const VDOM = <h1 id="title"> Hello, React </h1>

   2. JS: Syntax const VDOM = React.createElement(tag name, tag attribute-object writing, tag content)

      That is, without introducing babel, create a virtual DOM directly with React. Note here that document.createElement() creates a real DOM, while React.createElement() creates a virtual DOM.

      const VDOM = React.createElement('h1', {id: 'title'},'Hello, React')

      
      

   Case 2: One more level of nesting in case 1

   <div id="test">
       <h1 id="title">
           <span>Hello,React</span>
       </h1>
   </divdiv>

   
   

   1. JSX

      const VDOM = <h1 id="title"><span>Hello, React</span></h1>

   2. JS: Wrong writing (The span tag in this writing method does not take effect.)

      const VDOM = React.createElement('h1', {id: 'title'},'<span>Hello, React</span>')

      Correct spelling

      const VDOM = React.createElement('h1', {id: 'title'},React.createElement('span', {}, 'Hello, React')) //Write an empty object without a tag attribute.

      
      

   When multiple layers of tags need to be nested, it is very difficult to write native JS, and JSX only needs to be written in normal HTML mode.

   The creation of JSX is only to solve: to solve the problem that virtual DOM creation is too cumbersome. JSX also supports newline writing. Use parentheses ( ) to wrap the code in JSX. Note here that the JSX code in the example, after being translated by babel, is the JS code in the example.

   Therefore, the way of creating virtual DOM in JSX is the syntactic sugar for creating virtual DOM in native JS.

   
   

2. Virtual DOM

   Methods of outputting the DOM

   Use Console.log to output the VDOM. The result is a generic Object, whose data type is object, and which is also an instance of Object. (left)

   
   

   Use Console.log to output the real DOM. The real DOM is written HTML, like <div id="demo"></div> . If I use the code Console.log(document.getElementById("demo")), the output can only get <div id="test"></div> without seeing the attributes. So you need to use breakpoints, debugger; (right)

   
   

   

   
   

   In conclusion

   1. Virtual DOM is essentially an object of type Object (general object)

   2. The virtual DOM is relatively “light” and has fewer attributes; the real DOM is relatively “heavy”. Because the virtual DOM is used internally by React, there is no need for so many properties on the real DOM.

   3. The virtual DOM will eventually be converted into a real DOM by React and presented on the page.

      
      

3. JSX syntax

   The full name is JavaScript XML. It is a JS extension syntax similar to XML defined by React. XML is an early data storage and transmission mode. Later, JSON is used to store data in the form of {} object strings. The parse method converts the string to JSON, and the stringily method converts the object string.

   
   

   <student>
       <name>Tom</name>
       <age>19</age>
   </student>

   
   

   Grammar rules:

   1. When defining a virtual DOM, do not write quotes.

   2. If you want to mix JS expressions in the tag, use the {} form. And because JS requires lowercase, it can be converted with {myId}.toLowerCase( ).

   3. The style class name designation applies className, because class is already occupied by the keyword. For example className="title".

      
      

   4. The inline style cannot be written with style="color: white", it will report an error that style cannot be written as a string. Because multiple sets of key-value pairs can be written in style, inline styles are written in object form in JSX. style needs to be written as a double {} pattern, ie: style={{}}

      The outer {} represents the JS environment, and the inner {} represents the object in the JS. Such as style={{color: 'white'}} . Be careful to add '' here, otherwise it will become a variable.

      In addition, some inline styles are composed of multiple words, namely font-size. It should be written as a small hump, that is, style={{color: 'white', fontSize: '20px'}}

      Summary: Inline styles should be written in the form of style={{key: value}} .

      
      

   5. JSX requires only one root tag. That is, the outermost layer needs a <div> container.

   6. The label must be closed.

      The first: <input type="text"></input>

      The second: <input type="text"/>

      
      

   7. Lowercase tags in JSX tags will be automatically converted to HTML tags with the same name when babel is compiled, and uppercase tags are component tags. But if you write a tag that is not in HTML and it is still a lowercase tag, it will be ignored by babel when compiling, which is equivalent to writing no tag outside.

      The first letter of the label: If it starts with a lowercase letter, the label will be converted to an element with the same name in HTML. If there is no element with the same name in HTML, an error will be reported. If the uppercase letter starts with , react will render the corresponding component. If the component is not defined, an error will be reported.

      
      

4. JSX error-prone point

   1. React can automatically traverse the data in the array. The backend returns pure data, which is modified with map().

   2. React cannot directly write the object as a node in the JSX tag. The corresponding error is:

      Uncaught Invariant Violation: Objects are not valid as a React child. If you meant to render a collection of children, use an array instead.

   3. In JSX, the for loop cannot be written in the tag. Because JS expressions inside JSX tags are written in {}, {} can only be written as expressions, not statements.

      
      

   4. JS expressions

      Expression: An expression yields a value and can be placed anywhere a value is required.

      Example: a variable name, a+b, demo(1) function call expression, arr.map() processing array, function test(){} defining function.

      Simple distinction method: connect a const x= to the left of the expression, if it can receive a value, it is an expression, and if it cannot be received, it is not.

      Statement: if(){}, for(){}, switch(){case:xxx}

      The statement controls the direction of the code. No value, not part of an expression, no value.

      
      

   5. The map needs a key after modifying the array, because the diff algorithm needs it. The key is written in the loop tag as an attribute.

      If you don’t add data in reverse order, delete in order, etc. to destroy the order, only the list is rendered for display, and index can be used as the key.

      
      

5. The way of comments in JSX

   Using /* */ directly will not work. Use {/* */} because {} provides the JS execution environment.

   
   

6. Folding code in JSX

   //#region
   code block
   //#endregion