May 31, 2021 Article blog
React is a JavaScript library that creates user interfaces from Facebook's open source and is now used on Facebook and its Instagram apps.
What makes React different from the huge AnangularJS is that it focuses only on V in the MVC framework, the view;
When React is in use, you should start with the UI, abstract different components, and then assemble them;
React's core idea is to encapsulate components.
Each component maintains its own state and UI, automatically re-rendering the entire component when the state changes.
An intuitive feeling based on this approach is that we no longer have to go back and forth looking for a DOM element and then manipulate the DOM to change the UI.
React broadly contains the following concepts:
Here's a quick look at these concepts with a simple component and a general understanding of React.
import React, { Component } from 'react';
import { render } from 'react-dom';
class HelloMessage extends Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
/ / Loading components to DOM elements MountNode
render(<HelloMessage name="John" />, mountNode);
React apps are built on components.
The HelloMessage above is a React-built component, and the last sentence render displays this component inside an element on the page, MountNode, which is < div> Hello John</div >.
Props is one of the two core concepts that a component contains, and the other is state (which is not used by this component). Props can be thought of as the configuration properties of a component, unchanged inside the component, except that different properties (such as name here) are passed in when the component is called to customize the display of the component.
As you can see from the code above, HTML is embedded directly into the JS code, which is a syntax called JSX proposed by React, which should be one of the most unacceptable settings to first come into contact with React, because the front end has been "brainwashed" by the idea of "separation of performance and logic layers" for too long. But in reality, the HTML of a component is an integral part of a component, and being able to encapsulate HTML is the full body of the component, and React invented JSX to make it possible for JS to support embedded HTML.
The good news is that you may not necessarily use this syntax, and you'll learn more about JSX later, which you might like. What you need to know now is that to use a component that contains JSX, you need to "compile" the output JS code to use it, and then you'll talk about the development environment.
When the component state state changes, React automatically calls the component's render method to re-render the entire component's UI.
Of course, if such a large area of operation DOM, performance will be a big problem, so React implemented a VirtualDOM, component DOM structure is mapped to this Virtual DOM, React on this Virtual DOM implemented a diff algorithm, when the component is to be re-rendered, will be diff to find the DOM node to change, and then update this modification to the browser's actual DOM node, S o it's not really rendering the entire DOM tree. This Virtual DOM is a pure JS data structure, so performance is much faster than native DOM.
"One-way data binding" is one of react's preferred ways of applying schemas. When an app is complex enough to realize its benefits, although in a general scenario you may not realize that it exists or affect your ability to start using React, you only need to know that there is such a concept.