Personal understanding of react

# #React背景

React is the most fire frame at the front, its idea and construction method is more suitable for webapp than Angularjs.

It is developed by the Facebook team and open source to the community, so it has a strong technical background, and its architecture is very new, there is a great development prospects, is likely to be the leader of the future front-end framework, so we can pay more attention to react this framework.

# #React的实现

React is a modular development approach in which any component can be replaced or changed, and each DOM node can be treated as a component, a concept that is somewhat similar to our usual modularity.

And its function is so powerful because of its cutting-edge virtual DOM technology: React will copy the entire HTML DOM node into memory, when a node is modified or replaced, it will now find the modified node in memory, The memory of the node in the virtual out of the function and then render to the real node of the page, so that the entire page to avoid re-rendering, and the operation of the virtual node is very efficient, it eliminates the process of page rendering.

The frameworks we use often have to be compared to the MVC framework, where react is only equivalent to V in MVC, the view part, which has no models and controllers, but it can be combined with other models.

React adopts the idea of----divide and conquer, but it is more difficult to operate than Angularjs or ES6 modularization, and it is suitable for single page application.

# #React的使用

At least two JS files should be introduced when using react.

--React.min.js React-dom.min.js '

The most basic react operations, such as:

Reactdom.render (
React.createelement (' H1 ', null, ' Hello eeact! '),
document.getElementById (' content ')
);

It's a little complicated to develop new nodes, so react provides us with a new syntax, JSX

We can pack jsx into HTML code in a packaged way

We can define the type of react in the SCRPT tag:
Type = "Text/babel"
When adding classes to tags, you cannot write a class but write classname
When writing a style to a label, you cannot write style= "" to be written as style ={}

# # #创建组件

var myelement = React.createclass ({
Render:function () {
Return <div>
</div>
}
});

Write at the time of use:

Reactdom.render (
<myelement></myelement>,
document.getElementById (' content ')
);

In the use of JSX, all variables are added with a {}

# #React参数的传递

Just as we often use value passing, there are some methods of value passing in react:

* * How to implement data transfer * *: There are two passes between components and components: props and children,props can get all the properties and text properties of the current object, and children gets the intermediate text of the start and end tags, which is also obtained from props.

There are two ways that parent components pass parameters to subcomponents:

1, props

Usage: The parent component now defines a property, which is then passed to the subcomponent, which is obtained through the This.props. Property name.

2, children

Usage: Gets the content in the middle of the start and end tags.

Props can get properties and children.
Children can only get the contents of the start tag and the end tag in the middle.

The hardest part of react is the transfer of data.

# #React的redux方法

React data transfer is a one-way data flow, each component interacts with the state, but the state cannot be passed, because it is a one-way data flow, so the sibling transfer needs to pass through the parent, but when the components are more complex, it is more chaotic to pass this method

So there's a flux pattern in react, and all the state in his mode is in one or several store warehouses, changing the value in the store through dispatch distribution, and if the other components bind the store's data, the store data changes, Then the data of the component will change, then the operation of all the data will not pass through the state, but in the store, and **redux is a tool like this process * *, reference and improve flux, can also be used in angular and jquery.

Redux process: When we need to manipulate the data, we need an action to call before calling Dispatch, and then distribute it to the store, the store has the middle key and reducer function (responsible for the role of the controller) to handle the data stored in the store, This changes the data of the component.

The design of the store is a difficult point.

Before using redux, please download: NPM install redux, and download the middle key npm install React-redux

Each action is to write the corresponding reducer

Const TEXTREDUCER = function (state = {},action) {
Type string is generally uppercase
The state returned here is the new state.
if (Action.type = = "Add_cout") {
var newstate = objext.assign ({},state,{count:action.count}),//assign method of merging two objects, passing 3 parameters
return newstate;
}
}

Create Store:createstore (Textreducer);

# #关于React的交互问题

One thing we have to mention here is that because we use react because it's convenient and quick to manipulate the virtual DOM, we try to avoid the operation of the real node when we use react.

Add an event in react, such as adding a click event:
Compute:function () {
if (!this.refs.show.innerhtml) {
This.refs.show.innerHTML = 1;
}else {
This.refs.show.innerHTML = parseint (This.refs.show.innerHTML) + 1;
}
Because this is an operation node, it is not recommended to use
},
Render:function () {
Return <div>
<input type = "button" value = "click" OnClick ={this.compute}/>
<span ref= "Show" ></span>
</div>
}

An attribute state is provided in react: state, each component can go to create a status of his own, which is not transitive, can only be used on its own, and cannot be used by other components.

When using state, the following steps are required:

1. Initialize State

Getinitialstate:function () {
return {
The definition here is your own State property.
num:0
}
}
2. Operation state

Compute:function () {
This.setstate ({
Num:this.state.num + 1
})
}
Adding in a node
<span>{this.state.num}</span>

# #React的生命周期

In react, when a component is called between components, it often uses some special methods, such as the need to execute a function when the component has just been loaded, when the value of a component changes, a method of a component is executed immediately, and so on, here we need to use the react life cycle method.

Seven different life cycle methods in react:

**componentwillmount

**componentdidmount

**componentwillreceiveprops

**shouldcomponentupdate

**componentwillupdate

**componentdidupdate

* * (PS: There is one I forgot, I hope you have the great God added)

which

1, **componentwillreceiveprops,shouldcomponentupdate,componentwillupdate,componentdidupdate** : These four methods do not execute immediately when the component is just loaded.

2. Shouldcomponentupdate is executed before render when the property value of the current component or state changes, and returns a Boolean value that prevents subsequent execution if it is not written or false;

3, Componentwillupdate is carried out before the update;

4, Componentdidupdate is executed after render, try to avoid the change of state in these three methods;

5, when the props changes in the case will be executed componentwillreceiveprops, but to change the value of props need to set sub-components, in the four components are first executed;

6, Componentwillreceiveprops can pass parameters Newprops, get the new props

7, Shouldcomponentupdate can pass newstate and newprops, can get new state and new props

Personal understanding of react