Summary of react learning (life cycle-instantiation period-existence period-destruction period)

This is my study react of the stage summary, if crossing you are react veteran players, then also please stop to go elsewhere, if you want to give some advice and guidance, then also please pat ~

At present, the use of react in the team is very common, before the use of react, just as I am currently doing the project is also in use React+redux, through this opportunity system of learning under the React+redux.

What is react?

React is a JavaScript class library that allows us to build composable UIs through react, which means we can assemble our UI by reusing components. It can be said that the core of react is the component, the purpose is reuse and combination.

React solve what problem

The official website has such a sentence.

We built React to solve one problem:building large applications with data, changes over time.

We know that as the scale of the application expands, the data model behind the UI becomes more complex, and the business logic inevitably becomes more complex, so complex that we need to devote a lot of time and effort to simply fixing a simple problem.

Many of the existing front-end frameworks are committed to solving such problems, the basic ideas are based on the mv* model, here is an article detailing the principles and advantages and disadvantages of various mv* models.

So, how did react solve the problem?
React focus on components. The component that react understands is actually a state machine. When the component is in a state, the interface corresponding to that state is output. In react, we simply need to update the state of a component and then output the entire interface based on the new state. React is responsible for the most efficient way to compare two interfaces and update the DOM tree. As for how to manage the data outside of the component, react proposed the flux scheme.

React dot point life cycle

As we know earlier, the react component is a state machine, with state as input and interface as output. Between different state transitions, react provides a series of life cycle methods that can be broadly divided into the following three categories:

Instantiation period

The react component, when instantiated, invokes the following component method in turn:

• Getdefaultprops
• Getinitialstate
• Componentwillmount
• Render
• Componentdidmount

Existence period

When the react component is instantiated, some of the user's actions cause the component state to be updated, and the following method is called in turn:

• Componentwillreceiveprops
• Shouldcomponentupdate
• Componentwillupdate
• Render
• Componentdidupdate

Destruction Period

When the component is destroyed, the following component methods are called:

• Componentwillunmount

Here's a simple test code:

var childcomponent = React.createclass ({render:function () {Console.log ("Call render");Return (<div> {This.props.data}</div>); }, Componentwillreceiveprops:function () {Console.log ("Call Componentwillreceiveprops"); }, Shouldcomponentupdate:function () {Console.log ("Call Shouldcomponentupdate");ReturnTrue }, Componentwillupdate:function () {Console.log ("Call Componentwillupdate"); }, Componentdidupdate:function () {Console.log ("Call Componentdidupdate"); }, Componentwillunmount:function () {Console.log ("Call Componentwillunmount"); }});var mycomponent = React.createclass ({getdefaultprops:function () {Console.log ("Call Getdefaultprops");return {className:"Test"}; }, Getinitialstate:function () {Console.log ("Call getinitialstate");Console.log ("Log prop:", this.props);return {text:"Something"}; }, Componentwillmount:function () {Console.log ("Call Componentwillmount"); }, Componentdidmount:function () {Console.log ("Call Componentdidmount"); }, Render:function () {Console.log ("Call render");var child;if (This.state.text = = ="After Click") {child =Null }else {child =<childcomponent data= {this.state.text}/>;} return (<div Span class= "hljs-attr" >classname={this.props.classname}  Onclick={this.handleclick}> {child} </ div>); }, Handleclick: function (this.setstate ({text:  "after Click"});}); Reactdom.render (<mycomponent/> document.getElementById ("content"));             

Common APIs

About the API section, the official website has been given a detailed description, omitted here.

JSX

JSX is one of the core components of react. React strongly believes that the tag and the code that generates it are tightly connected, and if the presentation logic is very complex (in fact, in most cases), then implementing the logic through the template language generates a lot of code, so react does a very simple, optional HTML syntax, A compiler that generates a template from a function call is called a jsx.

With JSX, we can create JavaScript objects with HTML syntax. For example, in order to generate a link in react, it can be written in plain javascript:

React.createElement(‘a‘, {href: ‘http://facebook.github.io/react/‘}, ‘Hello React!‘)

By Jsx this becomes:

<a href="http://facebook.github.io/react/">Hello React!</a>

We found that by JSX, the code would be more concise and readable, and more convenient to use.

For more information about JSX, please refer to the official documentation.

Combining reusable components

As we know earlier, the core of react is the component, the purpose of which is reuse and combination. So what can we do to make components reusable and composable?

First of all, talk about combinations.
A combination describes a relationship that is described as has-a in object-oriented programming.
In react, we use the following code to implement the combination:

<Parent><Child data={this.props.childData} /></Parent>

In this example, there is an instance of child in the parent, which is owned by the parent. In a component, a component cannot change its own props, and the component's props is always consistent with the component's own settings.
Here's a very interesting thing to do. The props of a component always comes from the owner of the component (except the default), and the owner of the component can calculate some values from its props or state and bind those values to the props of the components they own, in react. The data flows from the owner of the component to the component in a one-way manner through props.

Again, reusable.
Reusable, the first feeling is that there is a layer of abstract meaning in it. We abstracted a layer of interfaces from a number of similar components to implement common components. In other words, we split the common design elements (buttons, forms, etc.) on some pages into reusable components that are well-designed for interfaces. Each component is well tested and packaged, so you can write less code the next time you develop a similar page, which means higher development efficiency and higher quality.

For more on component composition and reusable instructions, see Composite components and reusable components.

Summary of react learning (life cycle-instantiation period-existence period-destruction period)