This article has participated in the call for good writing activities, click to view: back end, big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!
10 minutes Understand REACT concepts
Note: This article assumes that you are familiar with template technology, at least with simple templates like Art-Template or EJS
Of course, this means that you should have some JS background and be familiar with DOM manipulation
At the same time, this article requires you to have a basic object-oriented thinking, if not clear, please refer to the video tutorial.
React’s special syntax requires that you be familiar with ES6’s object-oriented syntax
What does a template do?
For example, the following template:
We have a data set ready:
Populate the template with data to generate an HTML page:
What problems can arise when data changes frequently?
Each time the data changes, we need to re-populate the template with the latest data
The generated HTML text is then reappended to the page for rendering
We have to ask: Isn’t there an easier way?
We came up with the following solution:
If we can bind the template to the data, when the data changes
Automatically populate the template and update the page.
This way, the content of the page can change in real time as we manipulate the data.
This is where react, a template-based framework, comes in.
What exactly is React componentization?
First we have to ask a question.
What is a component?
Going back to that template, can it be called a component?
Although this template is reusable, calling it a component is a long way off.
Why is that? It depends on how we define, what is a component?
By components, I mean dynamic templates that are highly reusable
Our previous template was missing three important things
- First, it doesn’t do data binding, so the page can’t update automatically when the data changes.
- Second, it does not save interactions on the page. Such as mouse swipe, click events and so on.
- Third, templates cannot be nested or referenced with each other to maximize reuse.
The React component solves all of these problems.
Why does the React standard syntax recommend ES6?
This goes back to our object-oriented thinking
We all know the relationship between classes and objects
If we think of a class as a template, we can instantiate (new) objects an infinite number of times.
In object orientation, our class is like a highly reusable component
Hence the following syntax
We use Class to define a component, and each component must have a Render method to render the page
In the Render method, we can write our template content as usual
Not only that, we also save the click function in the component ↓↓↓
The data in the component can be passed through constructors. Left left left
Finally, we use ES6’s modularity syntax to expose this component as a module that can be referenced by other components. Left left left
Once the component is introduced, we can use it as an HTML tag ↓↓↓
This is the standard way to write a React component.
How about the virtual DOM in React?
Back to the data binding problem we talked about earlier
Suppose we now have a component with the following DOM structure
Currently, though React already does this, the page automatically updates in real time when data changes
But that still doesn’t solve a problem
When any small data changes in a component, we need to re-render the entire component to update the page.
This creates a huge workload for the browser, which is obviously unnecessary.
React introduced virtual DOM technology
First, you build a tree of objects in memory with a DOM structure.
Each object corresponds to a DOM node and stores all information about that node (including events, in theory)
We call this object tree, also known as the virtual DOM tree
And then, when the data changes,
React generates a new virtual DOM tree again
React then scans the nodes of the two virtual DOM trees
Finally, all the changed nodes are recorded
React eventually updates the DOM node that changed, not the entire component
This is how the virtual DOM improves performance.
