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

This article mainly explains "what are the basic knowledge points of ReactJs". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what are the basic knowledge points of ReactJs"?

A brief introduction to ReactJS

React originated from Facebook's internal project, because the company was not satisfied with all the JavaScript MVC frameworks on the market, so it decided to write its own set to build Instagram's website. After it was made, it was found to be very useful, and it was opened up in May 2013. Because the design idea of React is extremely unique, it is revolutionary and innovative, and the performance is excellent, but the code logic is very simple. Therefore, more and more people begin to pay attention to and use it, thinking that it may be the mainstream tool for Web development in the future.

ReactJS official website address:

Github address:

Second, understanding of ReactJS and the advantages of ReactJS

First of all, there are some misunderstandings about React. Here's a summary:

React is not a complete MVC framework, it can be regarded as the V (View) of MVC at most, and even React does not very much approve of the MVC development model.

React's server-side Render capability is only an icing on the cake, not its core starting point. In fact, the official React site hardly mentions its server-side application.

Some people compare React with Web Component, but they are not completely competitive. You can use React to develop a real Web Component.

React is not a new template language, JSX is just an appearance, and React can work without JSX.

1. The background and principle of ReactJS

In Web development, we always need to reflect the changed data to UI in real time, so we need to operate on DOM. Complex or frequent DOM operations are usually the cause of performance bottlenecks (how to perform high-performance complex DOM operations is usually an important indicator of the skills of a front-end developer). For this reason, React introduces the mechanism of virtual DOM (Virtual DOM): a set of DOM API is implemented with Javascript on the browser side. When developing based on React, all DOM construction is carried out through virtual DOM. Whenever the data changes, React will rebuild the entire DOM tree, and then React will compare the current entire DOM tree with the last DOM tree to get the difference of DOM structure, and then only the parts that need to change are updated by the actual browser DOM. And React can batch the refresh of the virtual DOM, and two data changes in an event cycle (Event Loop) will be merged, for example, if you continuously change the node content from A to B, and then from B to A performance, the UI will not change, and if you control it manually, this logic is usually extremely complex. Although it is necessary to construct a complete virtual DOM tree each time, because the virtual DOM is in-memory data, the performance is extremely high, while only the Diff part is operated on the actual DOM, so the performance can be improved. In this way, while ensuring performance, developers will no longer need to pay attention to how a data change is updated to one or more specific DOM elements, but only care about how the entire interface is Render in any one data state.

If you have written pure Web pages of server-side Render as you did in the 1990s, you should know that all the server-side has to do is to send HTML to the browser based on the data Render. If a status text needs to be changed because of a click by the user, it is also done by refreshing the entire page. The server side does not need to know which small piece of HTML has changed, but only needs to refresh the entire page based on the data. In other words, any change to UI is done through an overall refresh. React brings this development model to the front end in a high-performance way, and every time you update the interface, you can think of it as refreshing the entire page. As for how to make local updates to ensure performance, it is what the React framework wants to accomplish.

To borrow the example of Facebook introducing the chat application in React's video, when a new message comes, the traditional development idea is like the figure above, your development process needs to know which data is coming and how to add the new DOM node to the current DOM tree; while the React-based development idea is shown below, you always only need to care about the data as a whole, and how the UI between the two data changes, then leave it entirely to the framework to do. As you can see, the use of React greatly reduces logical complexity, which means that development is less difficult and there are fewer opportunities to generate Bug.

2. Componentization

Virtual DOM (virtual-dom) not only brings simple UI development logic, but also brings the idea of component development, the so-called components, that is, packaged UI components with independent functions. React recommends rethinking the composition of UI in the way of components, defining each module with relatively independent functions on UI as components, and then combining or nesting small components to form large components, and finally complete the construction of the overall UI. For example, Facebook's instagram.com is developed using React, and the whole page is a large component, which contains a large number of other components. If you are interested, you can take a look at the code behind it.

If the idea of MVC allows you to achieve the separation of view-data-controller, then the component-based way of thinking brings about the separation of UI functional modules. We see the difference between MVC and component-based development ideas through a typical Blog comment interface.

For the MVC development model, developers define the three as different classes, realizing the separation of performance, data and control. Developers are more likely to split UI from a technical point of view to achieve loose coupling.

For React, it is a completely new idea. From a functional point of view, developers divide UI into different components, each of which is packaged independently.

In React, you organize and write your code according to the natural division of interface modules. For the comment interface, the whole UI is a large component composed of widgets, each component only cares about its own part of the logic, independent of each other.

React believes that a component should have the following characteristics:

(1) Composeable: one component is easy to use with other components, or nested within another component. If another component is created within one component, then the parent component own the child components it creates. Through this feature, a complex UI can be split into several simple UI components.

(2) Reusable: each component has an independent function and can be used in multiple UI scenarios

(3) Maintainable: each small component contains only its own logic, making it easier to understand and maintain.

Download ReactJS and write Hello,world

ReactJs download is very simple, in order to facilitate everyone to download, here again gives the download address (link), after the download is complete, we see is a compressed package. After decompressing, we create a new html file and reference the two js files, react.js and JSXTransformer.js. The html template is as follows (the js path is changed to your own):

Here you may wonder why script's type is text/jsx, because React's unique JSX syntax is not compatible with JavaScript. Wherever JSX is used, type= "text/jsx" should be added. Second, React provides two libraries: react.js and JSXTransformer.js, which must be loaded first. Among them, the function of JSXTransformer.js is to convert JSX syntax into JavaScript syntax. This step is time-consuming. In fact, when you are online, you should put it on the server to complete it.

At this point, we can start writing code. First, let's take a look at the React.render method in ReactJs:

React.render is the most basic method of React, which is used to convert the template into the HTML language and insert the specified DOM node.

Next, let's write code in the script tag to output Hello,world, as follows:

It should be noted that react does not rely on jQuery, of course, we can use jQuery, but the second parameter in render must use the native getElementByID method of JavaScript, and you cannot use jQuery to select the DOM node.

Then, when you open the page in the browser, you can see that the browser displays a large Hello,world because we used the tag.

So far, congratulations, you have stepped into the door of ReactJS-- next, let's learn more about ReactJs--

IV. Jsx grammar

The HTML language is written directly in the JavaScript language without any quotation marks. This is the syntax of JSX, which allows the mixing of HTML and JavaScript. Those who have known AngularJs will feel familiar with the following code. Let's take a look at the code:

Here we declare a names array, then iterate through it with Hello in front of it, and output it to DOM. The output is as follows:

JSX allows you to insert JavaScript variables directly into the template. If the variable is an array, all members of the array are expanded as follows:

The display results are as follows:

The asterisk here is only for marking, so don't be confused--

You see here, it shows that you are quite interested in React, congratulations, stick to it, so next, we begin to learn the "real kung fu" in React-Are you ready?

5. ReactJS components

1. Component properties

As mentioned earlier, ReactJS is based on component-based development, so let's start to learn about the components in ReactJS. React allows you to package the code into a component, and then insert this component into a web page just like inserting a normal HTML tag. The React.createClass method is used to generate a component class.

Next, let's write the first component, Greet, with a name attribute, and then output the value of hello + name as follows:

See this code, friends who have come into contact with AngularJS have a familiar feeling, but here are a few points to note:

1) this.props is used to get the value of the attribute. Attribute name

2) the first letter of the component name created must be capitalized.

3) when you add the class of css to an element, use className.

4) it is also worth noting how the style property of the component is set as style= {{width: this.state.witdh}}.

2. Component status

Components inevitably interact with users. One of the major innovations of React is to regard components as a state machine, starting with an initial state, and then user interaction, resulting in state changes that trigger re-rendering of UI. Let's write a small example, a text box and a button. By clicking button, you can change the editing state of the text box, disable editing and allow editing. Use this example to understand the state mechanism of ReactJS. Look at the code first:

Here, we use another method, getInitialState, which is executed when the component is initialized and must return NULL or an object. Here we can use this.state. Property name to access the property value, here we bind the value of enable to the disabled of input, and use the setState method when you want to modify this property value. We declare the handleClick method to bind to button to change the value of state.enable. The effect is as follows:

Principle analysis:

When the user clicks on the component, resulting in a state change, the this.setState method modifies the state value, and after each modification, the this.render method is automatically called to render the component again.

The noteworthy points here are as follows:

1) the getInitialState function must have a return value, which can be NULL or an object.

2) the method to access state is this.state. Property name.

3) the variable is wrapped in {} without the need for double quotation marks.

3. The life cycle of the component

The life cycle of a component is divided into three states:

Mounting: real DOM inserted

Updating: being re-rendered

Unmounting: the real DOM has been removed

React provides two processing functions for each state, the will function is called before entering the state, and the did function is called after entering the state. The three states have a total of five handling functions.

ComponentWillMount ()

ComponentDidMount ()

ComponentWillUpdate (object nextProps, object nextState)

ComponentDidUpdate (object prevProps, object prevState)

ComponentWillUnmount ()

In addition, React provides handlers for two special states.

ComponentWillReceiveProps (object nextProps): called when the loaded component receives a new parameter

ShouldComponentUpdate (object nextProps, object nextState): called when the component determines whether to re-render

Let's look at an example:

After the hello component is loaded, the above code sets a timer through the componentDidMount method, which resets the transparency of the component every 100 milliseconds, causing a re-rendering.

4. Nesting of components

React is based on component-based development, so what is the biggest advantage of component-based development? There is no doubt that it is reuse, of course. Let's take a look at how component reuse is implemented in React. Let's write an example here. The code is as follows:

Here we create a Search component, and then we create a Page component, and then we call the Search component in the Page component and call it twice. Here we pass the value through the property searchType, and the final result is shown in the figure:

VI. ReactJS summary

That's all for ReactJS today. Here's a summary. There are mainly the following points:

1. ReactJs is based on component-based development, so in the end your page should be a large component composed of several small components.

2, you can pass the value to the component through the attribute, and similarly, you can also pass the internal result to the parent component through the attribute (for everyone to study); if you want to DOM the change of some values, put these values into the state.

3. When adding external css styles to components, the class name should be written as className instead of class;. When adding internal styles, it should be style= {{opacity: this.state.opacity}} instead of style= "opacity: {this.state.opacity};".

4. The first letter of the component name must be capitalized.

5. The variable name is wrapped in {} and cannot be enclosed in double quotes.

At this point, I believe you have a deeper understanding of "what are the basic knowledge points of ReactJs?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.