Preliminary study on react

Know this framework for some time, but the project is not used, also lazy to tidy up, the last two days more leisurely, and think of it. Well, the nonsense is not much to say, are dry.

1. What kind of frame is react?
2. Why use react?
3. The principle of react
4. What are the characteristics of react?
5. Grammar & A few small examples

6. Some summary of react

What kind of frame is react?

React is a JavaScript library that Facebook and Instagram use to create a user interface.

Many people think of React as the V(view) of MVC, which can coexist with other frameworks;

the principle of react

In web development, we need to manipulate the DOM in real time by reacting the changed data to the UI. complex or frequent dom operations are often the cause of performance bottlenecks (how high-performance complex DOM operations are often an important metric for measuring a front-end developer's skills). React introduced the virtual DOM mechanism for this purpose: a set of Dom APIs was implemented with JavaScript on the browser side. All DOM constructs are made based on the react, and each time the data changes, react reconstructs the entire DOM tree, then compares the current entire DOM tree with the previous DOM tree to get the difference between the DOM structure, Then only the parts that need to be changed are actually updated in the browser DOM. And react can batch the refresh of the virtual DOM, the two data changes in an event loop are merged, for example, if you change the node contents from a to B successively, and then from B to A,react, the UI does not change, and if you control it manually, This logic is often extremely complex. Although it is necessary to construct a complete virtual DOM tree every time, because the virtual DOM is memory data, the performance is very high, and the actual DOM operation is only the diff part, so it can achieve the purpose of improving performance. In this way, while ensuring performance, developers will no longer need to focus on how changes to one or more specific DOM elements can be updated, but only to be concerned about how the entire interface is being render in any given state of the data.

If you write a Web page of server-side render as you did in the 90 's, you should know that what the server is doing is sending HTML to the browser based on the data. If one of the user's clicks needs to change a state text, it is done by refreshing the entire page. The server side does not need to know which piece of HTML has changed, but simply refreshes the entire page based on the data. In other words, any changes to the UI are done through a whole refresh. Instead, react brings this development model to the front end in a high-performance way, and you can think of refreshing the entire page with every update to the interface. As for how to perform a partial update to ensure performance, this is what the react framework will do.

Using Facebook's example of a chat app in React's video, when a new message comes in, traditional development ideas like, your development process needs to know which data came up, how to add the new DOM node to the current DOM tree, and based on the react of development ideas such as, You always have to care about the data as a whole, and how the UI changes between the two data are completely left to the framework. As you can see, the use of react greatly reduces the complexity of logic, meaning that development is less difficult and there are fewer opportunities for bugs to be generated.

Why use react?

React to address: large-scale applications that are constantly changing with time data. The main use of the following ideas:

• Simple

The view data is automatically updated when the underlying data changes, but only when the application that behaves as a certain point in time looks like;

• Declarative

The data changes, just update the changed parts (this is the special point of react, as described below)

What are the characteristics of react?

• There is a virtual DOM tree, each time the data update will compare the changed data, only to do a diff update;

• The two data changes within the event loop will be merged, such as the data changed from a to B, and then changed from B to a,react that no changes have occurred;

• React recommended to rethink the building UI in a modular way, mainly considering the separation between components;

Grammar & A few small examples

Well, first from the most familiar Hello World

1 <!DOCTYPE HTML>2 <HTML>3   <Head>4     <Scriptsrc= "Build/react.js"></Script>5     <Scriptsrc= "Build/jsxtransformer.js"></Script>6   </Head>7   <Body>8     <DivID= "Container"></Div>9     <Scripttype= "TEXT/JSX">Ten       //* * Our code goes here! * * One     </Script> A   </Body> - </HTML>

Here the main introduction of 2 JS, respectively, React.js and jsxtransformer.js, they need to load first, where jsxtransformer.js is to convert jsx into JavaScript syntax. This step is time-consuming and should be done on the server when it is actually applied.

Let's look at the basic methods of react

React.render is the most basic method of React, which is to convert JSX into HTML and insert it into the DOM

1 React.render (2         3         document.getElementById ( ' Container ')4       );

It is important to note that react does not rely on jquery, of course we can use jquery, but the second parameter in render must use the JavaScript native getElementById method, and you cannot use jquery to select DOM nodes.

Here we have entered the gate of react.

Here's the JSX syntax.

JSX is a JavaScript syntax extension that looks much like XML. React can be used to make simple JSX syntactic transformations.

Must you use JSX?

This is not necessarily, you do not need to use JSX for React, you can directly use the pure JS. However, we recommend using JSX because it defines a concise and well-known tree structure syntax that contains attributes.

It is also familiar to non-full-time developers (such as designers). XML has a fixed label open and closed. This makes the complex tree easier to read than the method call and object literal form.

It does not modify JavaScript semantics.

A little more complicated example, a search function.

React is based on component development, so what are the biggest advantages of component development? There is no doubt that reuse is of course.

Search

First of all, search must be a text box && Search button

var Search = react.createclass ({        function() {          return  (            <div>               {this.props.searchType}:<input type= "text"/>               <button >Search</button>            </div>          );        }      });

Follow the different content to search (title,content)

1 var Page=React.createclass ({2Renderfunction() {3           return (4<div>56<SearchSearchtype= "Title"/>7<SearchSearchtype= "Content"/>8</div>9           );Ten         } One});

The last render render is added to the DOM

1 React.render (2         <Page />,3         document.getElementById (' Container ')4       );

Pay attention to the marked red place

1, get the value of the property is This.props. Property name

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

Status Switch Change (Components are actually state machine states )

varInputState =React.createclass ({ getinitialstate:function() {          return{enable:false}; }, Handleclick:function(event) { This. SetState ({enable:! This. state.enable}); }, Render:function() {                    return (            <p> <input type= "text" disabled={this.state.enable}/> <button onclick={ This. Handleclick}>change state</button> </p>          );      }      }); React.render (<inputstate/>, document.getElementById (' container ')      );

We have also used a method getinitialstate, which executes when the component is initialized and must return null or an object. Here we can access the property value by This.state. Property name, where we will enable this value to bind to the disabled of input, and use the SetState method when you want to modify the property value. We declare the Handleclick method to bind to the button above to implement a change in the value of state.enable.

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 with {} package, no need to double quotation marks. 4. Component Life cycle

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

• Mounting: The real DOM is inserted
• Updating: is being re-rendered
• Unmounting: The real DOM has been removed

React provides two processing functions for each State, the will function is called before it enters the state, and the DID function is called after it enters the state, with three states totaling five processing functions.

• Componentwillmount ()
• Componentdidmount ()
• Componentwillupdate (Object Nextprops, Object nextstate)
• Componentdidupdate (Object Prevprops, Object prevstate)
• Componentwillunmount ()

In addition, the REACT provides two special state processing functions.

• Componentwillreceiveprops (Object Nextprops): Called when a loaded component receives a new parameter
• Shouldcomponentupdate (Object Nextprops, Object nextstate): Called when the component determines whether to re-render

Some summary of react

1. Reactjs is based on component development, so ultimately your page should be a large component consisting of several small components.

2, the value can be passed to the inside of the component through the property, the same can be passed through the property of the internal results to the parent component (for everyone to study); To do DOM operations on changes to certain values, place these values in state.

3. When adding an external CSS style to a component, the class name should be written as classname instead of class, and the internal style 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 with {} and cannot be enclosed in double quotes.

Reference Document: HTTP://WWW.TUICOOL.COM/ARTICLES/II6NN2

Preliminary study on react