React - Introduction to React, JSX Syntax, Virtual DOM

1. Introduction to React

What is 1.1 React?

JavaScript libraries for dynamically building user interfaces (view-only)

  1. Send a request for data
  2. Processing data (filtering, organizing formats, etc.)
  3. Manipulate DOM rendering pages (what React does)

React is an open source JavaScript library that renders data as an HTML view

1.2 Disadvantages of native JS

  1. Native JavaScript operation DOM is cumbersome and inefficient (DOM-API operation UI)
  2. Using JavaScript to manipulate DOM directly, the browser does a lot of redrawing and rearrangement
  3. Native JavaScript has no component encoding scheme and low code reuse

What is browser redraw rearrangement?

  • Repaint: When the appearance of an element changes without changing the layout, the process of redrawing the appearance of an element is called redrawing
  • Reflow: When changes in the DOM affect the geometric information of an element (the position and size of the DOM object), the browser needs to recalculate the geometric properties of the element and place it in the correct position in the interface, a process called rearrangement

What is modularity? What is componentization?

  • Modular
  1. Understanding: A js program that provides specific functionality to the outside world is usually a js file
  2. Why break up modules: As business logic increases, code becomes more and more complex.
  3. Function: reuse js, simplify the writing of js, improve the efficiency of JS
  • assembly
  1. Understanding: A collection of code and resources (html/css/js/image, etc.) used to achieve local functional effects
  2. Why use components: One interface has more complex functionality
  3. Function: Reuse encoding, simplify project encoding, improve operational efficiency

Modularization: When an application's js are written in modules, the application is a modular application
Componentization: When an application is implemented in a multicomponent manner, it is a component application

Advantages of 1.3 React

  1. Improving development efficiency and component reuse by using component mode and declarative encoding
  2. Mobile development using React syntax in React Native
  3. Use virtual DOM+Diff algorithm to minimize interaction with real DOM

1.4 React High Efficiency Reasons

  1. Using a virtual DOM does not always directly manipulate the real DOM of a page.
  2. DOM Diffing algorithm to minimize page redrawing.

2.JSX Syntax

Introduction to 2.1 JSX

  1. Full name: JavaScript XML
  2. React defines a JS extended syntax similar to XML: JS + XML is essentially a syntax sugar for the React.createElement(component, props,... children) method
  3. Role: Used to simplify the creation of virtual DOM s
    React uses JSX instead of regular JavaScript. Writing templates using JSX is simpler and faster, greatly improving programming efficiency

2.2 JSX Usage Specification

  1. When style class name is called, do not use class, but use className
<h1 className = 'color'>    
   Hello World!     
</h1> 
  1. Use {} when mixing JS "expressions" in Tags
const myData = 'HeLlo rEaCt'
<h1 className = 'color'>    
  <span> {myData} </span>     
</h1> 
  1. Inline style, use style = {{}} and value is written in "hump"
const myData = 'HeLlo rEaCt'
<h1 className = 'color'>    
  <span style = {{color:'white'}}>{myData}</span>    
</h1> 
  1. jsx requires that there should not be more than one root tag, there can only be one root tag for example: in this case there can only be one < h1>, the solution is to wrap a div tag around the bread or <> </>
  2. Tags must be closed, for example: < input type="text"> can't be written as: < input type="text"/> (can end by itself)

3. Virtual DOM

What is a 3.1 virtual DOM? Is it really?

  1. Objects of type Object (general objects)
  2. Virtual DOM is lighter and real DOM is heavier because virtual DOM is used internally by React and does not need so many attributes on real DOM
  3. A virtual DOM is eventually translated into a real DOM by React and presented on the page.

3.2 Code Display

Compare the difference between a real DOM and a virtual DOM through a code case

script src="./react library/Old Version/react.development.js"></script>

<script src="./react library/Old Version/react-dom.development.js"></script>

<script src="./react library/Old Version/babel.min.js"></script>

<script type="text/babel">
    const VDOM = <h1>hellow,React</h1>    // Virtual DOM
    ReactDOM.render(VDOM, document.getElementById('div'))

    const TDOM = document.getElementById('div1')	// Real DOM
    console.log('fictitious DOM', VDOM);  
    // (Light)       
    /*$$typeof: Symbol(react.element)
    key: null
    props: {children: 'hellow,React'}
    ref: null
    type: "h1"
    _owner: null
    _store: {validated: false}
    _self: null
    _source: null
    [[Prototype]]: Object*/

    console.log('real DOM', TDOM);
    // (heavy)
    /*accessKey: ""
    align: ""
    ariaAtomic: null
    ariaAutoComplete: null
    ariaBusy: null
    ariaChecked: null
    ariaColCount: null
    ariaColIndex: null
    ariaColSpan: null
    ariaCurrent: null
    ariaDescription: null
    ariaDisabled: null
    ariaExpanded: null
    ariaHasPopup: null
    ariaHidden: null
    ariaKeyShortcuts: null
    ariaLabel: null
    ariaLevel: null
    ariaLive: null
    ariaModal: null
    ariaMultiLine: null
    ariaMultiSelectable: null
    ariaOrientation: null
    ariaPlaceholder: null
    ariaPosInSet: null
    ariaPressed: null
    ariaReadOnly: null
    ariaRelevant: null
    ariaRequired: null
    ariaRoleDescription: null
    ariaRowCount: null
    ariaRowIndex: null
    ariaRowSpan: null
    ariaSelected: null
    ariaSetSize: null
    onpointerenter: null
    Wait...............*/    
</script>

Tags: Javascript node.js html5 React Vue.js

Posted on Wed, 01 Dec 2021 15:08:12 -0500 by keevitaja