In-Depth Understanding of the Three Major Features of React in Practice

Three Features of React
insert image description here

declarative programming
Imperative Programming vs Declarative Programming:
Simply put, imperative programming is telling a computer what to do through code.
Declarative programming is telling the computer what you want to do with code so the computer can know how to do it.
An example from life is:
Command programming: I want to drink an ice Coke, then I will say to the XXX around me: "XXX, go to the kitchen, open the refrigerator, get a bottle of ice Coke, open it and send it to me."
Declarative programming: I want an iced Coke, and I'll say to the XXX around me, "XXX, I want an iced Coke." I don't care how he gets the iced Coke, how he sends it, what the heck Was it bought downstairs or kept in the fridge. All I care about is whether my need for ice coke is met.
Take the code as an example:

const container = document.getElementById( "container" );
const btn = document.createElement("button");

btn.className = "btn red " ;
btn.textContent = "Demo";

btn.onclick = function ( ) {
if ( this.classList.contains( "red" ) ) {
this.classList.remove( "red" );
this.classList.add( "blue" );
}else {
this.classList.remove( "blue" );
this.classList.add( "red" );
}
};
container.appendChild( btn );
If I want to display a button on the interface, and then click the button, the button's class will be changed.
Code written by Dom programming is imperative programming: first, a command browser is required. The first step is to find the node with the id container, then create a button element, then add a class name to the button, then add a click event, and finally add the button to the container node. Every step of the process is essential, step by step telling the browser what to do.

class Button extends React.Component {
state = { color: "red" };
handleChange =()=> {
const color = this.state.color == "red" ? "blue" : "red" ;this.setState({ color });
};
render( ) {
return (

);
}
}

React is much simpler using declarative programming in order to achieve the same functionality.
First, we define a button component. In the render function, by returning an HTML-like data structure, we tell react that I want to render a button, which is a child node with an ID container. The class name on the button changes dynamically. When the button is clicked, the class will change. this is all. As for when the rendering is performed, how it is rendered to the page, and how the class name is updated when the button is clicked, you don't need to care. You just need to tell react what state you want the current UI to be in.

componentized
React provides a new syntax to extend JSX. JSX creatively combines presentation logic and UI logic, and this combination is called components in react. A page consists of multiple components, even the entire application can be considered as one component, it is only the largest component. Components can be nested layer by layer. A component can be composed of multiple components. Large widgets are composed of many widgets, which can also be composed of smaller widgets. The same part can be used in different places.

Learn once, write anywhere
The point of this sentence is not that you can write what you want, or that you can write once and run anywhere, but that you can write code in many places using react syntax, such as writing web pages with react DOM , use react native to write mobile client applications, and use React360 to develop VR interfaces.
The flexibility of react depends on its own positioning. React is a JS library for building user interfaces. For React, the UI here is an abstract virtual UI, which is actually a data structure that describes the state of the page. Web pages, mobile client pages, and VR interfaces are all user interfaces. As long as the corresponding renderer is used, the correct UI interface can be displayed on different platforms.
Generally speaking, we can imagine the execution result of react as video file data. In different player devices, we compile the videos into different formats through converters, so that they can be played normally on different players. Therefore, when writing react on the web side, we need to additionally introduce react DOM for rendering.

Creation of virtual DOM
Two ways to create a virtual DOM
Pure JS mode (usually not used, too cumbersome)
JSX mode (simple and convenient, finally translated into JS by Babel, the same result as written in JS)

Virtual Dom and Real Dom
React provides some API to create a "special" == generic JS object ==

const VDOM = React.createElement('xx',{id:'xx'},'xx')///The label name, label attribute and label content in turn
When coding, we only need to manipulate the virtual DOM related data of react, and react will convert it into the real DOM
Virtual DOM overview:
Essentially an object of type object (general object)
Virtual DOM is "light" while real DOM is "heavy" because virtual DOM is used internally in react and doesn't require too many properties on real DOM
The virtual DOM object will eventually be converted to the real DOM by react and displayed on the page

Modules and components, understanding of modularity and componentization
module
Understanding: JS programs that provide specific functions externally are usually JS files
Why split into modules: Because the code becomes more and more complex as the business logic increases
Function: take JS, simplify JS writing, improve JS running efficiency

components
Comprehension: A collection of code and resources for implementing native functions (HTML/CSS/JS/image, etc.)
Why is the functionality of an interface so complex that it is impossible to write it in one piece? It should be written in pieces and put together
Function: Reuse coding, simplify project coding, improve operational efficiency

modular
When the js of an application is written in modules, the application is a modular application

componentized
When the application is implemented in a multi-component way, the application is a componentized application

Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number
}
Use prop-types library to limit (need to import prop-types library)

Person.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number.
}
reateRef creates a ref container

myRef = React.createRef();