React extension

DOM, virtual DOM

DOM (Document Object Model) defines standard methods for accessing and manipulating documents. According to the W3C DOM specification, DOM is a browser-, platform-, and language-independent interface that allows you to access other standard components of the page.

XML、HTML

XML is designed to transport and store data, with the focus being the content of the data.
HTML was designed to display data, with the focus being on the appearance of the data.
HTML is designed to display information, while XML is designed to transmit information.

DOM tree

Representation of the DOM tree

According to the Document Object Model (DOM), each HTML tag is an object. Nested tags are the "children" of the closing tag. The text inside the label is also an object. All these objects are accessible through JavaScript and we can use them to modify the page. For example, document.body represents <body>the tag.

automatic correction

If the browser encounters malformed HTML, it automatically corrects it when forming the DOM.
For example, the top-level tag is always <html>. Even if it doesn't exist in the document - it will appear in the DOM because the browser creates it. The same is true for <body>.
For example, if there is only one word "Hello" in an HTML file, the browser will wrap it in <html>and <body>and add the required <head>, the DOM will become like this

node type

There are 12 node types in total. In fact, we usually use 4 of them:
document - the "entry point" of the DOM.
Element nodes — HTML tags, tree building blocks.
Text node—contains text.
Annotations - sometimes we can put some information in it and it won't be displayed but JS can read it from the DOM

virtual dom

virtual DOM Virtual DOM uses ordinary js objects to describe the DOM structure. Because it is not a real DOM, it is called virtual DOM. J
has the following benefits.

Can maintain relationships between views and state
Improve rendering performance in complex views
In addition to being rendered into DOM nodes, virtual DOM can also be rendered to other platforms such as ssr (nuxt.js/next.js), native applications (weex/rn), small programs, etc., adding cross-platform capabilities.

jsx

JSX represents JavaScript XML, which is converted into ordinary js code through Babel.
New jsx appeared after react17, which can be used without introducing react.
The disadvantage of old is

To write jsx, you must introduce react at any time
React.createElement cannot do some optimizations

For example, the old jsx transformation was

import React from 'react';
React.createElement('h1', null, 'Hello world');

// 由编译器引入（禁止自己引入！）
import {
    
    jsx as _jsx} from 'react/jsx-runtime';

function App() {
    
    
  return _jsx('h1', {
    
     children: 'Hello world' });
}

Virtual DOM library

fastdom

snabbdom is a simple yet powerful virtual DOM library used by Vue.

virtual-dom

A js-based DOM model that supports element creation, difference calculations and patch operations for efficient re-rendering

Abstract Grammar Book AST

In computer science, Abstract Syntax Tree (AST), or simply Syntax tree, is an abstract representation of the grammatical structure of source code. It represents the grammatical structure of a programming language in the form of a tree, and each node on the tree represents a structure in the source code.

use

Editor error prompts, code formatting, code highlighting, and code auto-completion;
elint and pretiier check for code errors or styles;
webpack uses babel to translate javascript syntax.
After learning it, you can write babel plug-ins.

AST standard for js

estree- EcmaScript AST standard;
shift - designed with transformation in mind, not compatible with estree;
babel - supports language features which is have not yet become a standard, but have a proposal.

JavaScript parsers:

esprimafirst generation
acornUsed frequently, quickly and stably
espree based on acorn, used in eslint;
@babel/parser based on acorn, supports all new language features
shfit-ast parser produces Shift AST
typescript can parse JavaScript and TypeScript, producing it’s own AST format for this

analyze

Generally, 词法分析the token is generated first, and then 语法分析( Parser )the AST is generated.
You can use astexplorer to view the grammatical structure.

About React

A JavaScript library for building user interfaces, React focuses on the implementation of the UI layer.
React is characterized by being declarative, component-based, and learn once write anywhere. Use jsx syntax to simulate the structure of the real DOM. The biggest advantage of React is scalability

React logic encapsulation

High-order components
Render Props
Hooks
context
internal components, internal classes

Basic usage

Source code analysis

Performance optimization

Class components should use shouldComponentUpdate reasonably and use PureComponent
Function components use react.memo, useMemo, useCallBack, etc.

React horizontal technical arrangement