Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to apply React". In daily operation, I believe many people have doubts about how to apply React. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to apply React". Next, please follow the editor to study!

React introduction

React, an open source JavaScript library for creating user interfaces by Facebook, is now used in Facebook and its Instagram apps.

What distinguishes React from the huge AngularJS is that it only focuses on the V in the MVC framework, that is, the view; this makes it easy for React to integrate with the developer's existing development stack.

When using React, you should abstract different components from UI, and then assemble them together, which conforms to the trend of Web development components.

React application

The core idea of React is to encapsulate components.

Each component maintains its own state and UI, and automatically re-renders the entire component when the state changes.

One intuitive feeling based on this approach is that we no longer need to go to the trouble of looking up a DOM element back and forth, and then manipulate DOM to change UI.

React generally includes the following concepts:

module

JSX

Virtual DOM

Data Flow

Here is a quick understanding of these concepts through 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 Hello {this.props.name}

}

}

/ / load the component to the DOM element mountNode

Render (, mountNode)

module

React applications are built on top of components.

The HelloMessage above is a component built by React, and the last sentence render will display this component in an element mountNode on the page, which is Hello John.

Props is one of the two core concepts contained in a component, and the other is state (this component is not used). You can think of props as the configuration property of the component, which is unchanged within the component, but different properties (such as name here) are passed in when the component is called to customize the display of the component.

JSX

From the above code, you can see that HTML is embedded directly into the JS code. This is a syntax called JSX proposed by React, which should be one of the most unacceptable settings for the first contact with React, because the front end has been brainwashed by the idea of "separation of presentation and logic layer" for too long. But in fact, the HTML of a component is an inseparable part of a component, and being able to encapsulate HTML is the whole of the component. React invented JSX to embed JS support into HTML has to be said to be a very smart approach, which makes it possible for the front end to realize real componentization.

The good news is that you don't have to use this syntax. JSX will be introduced later, and you may like it at that time. What you need to know now is that to use components that contain JSX, you need to "compile" output JS code before you can use it, and we'll talk about the development environment later.

Virtual DOM

When the component state state changes, React automatically calls the component's render method to re-render the UI of the entire component.

Of course, if you really operate DOM in such a large area, performance will be a big problem, so React implements a VirtualDOM, the component DOM structure is mapped to this VirtualDOM, and React implements a diff algorithm on this VirtualDOM. When you want to re-render the component, you will find the DOM node to be changed through diff, and then update the change to the browser's actual DOM node. So it doesn't really render the entire DOM tree. This Virtual DOM is a pure JS data structure, so the performance is much faster than the native DOM.

Data Flow

"one-way data binding" is an application architecture approach advocated by React. You can only realize its benefits when the application is complex enough, although you may not be aware of its existence in a general application scenario, and it will not affect you to start using React, you just need to know that there is such a concept.

At this point, the study on "how to use React" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.