Talking about React

Chance coincidence know react, turned over 2 days of information, and finishing 1 days, also is a simple introduction, before also learned angular, compared to, indeed react code logic more simple and clear, understanding is relatively easy.

React has the following features: 1. Declarative design? React uses a declarative paradigm that can easily describe an application.

2. Efficient? React minimizes the interaction with the DOM by simulating the DOM.

3. Flexible? React can fit well with known libraries or frameworks.

4.JSX? JSX is an extension of JavaScript syntax. React development does not necessarily use JSX, but we recommend using it.

5. Components? Building components through React makes the code easier to reuse and can be used well in the development of large projects.

6. One-way response data flow? React implements a one-way response data stream, which reduces duplicate code, which is why it is simpler than traditional data binding.

Here are some of the things I've learned about react.

Note: the example shown below only introduces React.js (Core JS), React-dom.js (JS for DOM), Browser.min.js (JSX interpretation), can download the latest source code directly to the official website: https://facebook.github.io/react/

First, Reactdom.render is the most basic method of React: Used to convert the template to HTML language and insert the specified DOM node

Reactdom.render (
document.getElementById (' example ')
);

Second, JSX Grammar--a language that React first proposed

JSX syntax: HTML language directly in the JavaScript language, without any quotation marks, this is the JSX syntax, which allows the HTML and JavaScript mix;

JSX allows JavaScript variables to be inserted directly into the template. If the variable is an array, all the members of the array are expanded to be added to the template.

Example 1:var names = [' Alice ', ' Emily ', ' Kate '];

Reactdom.render (
<div>
{
Names.map (function (name) {
Return <div><span>hello, {name}!</span></div>
})
}
</div>,
document.getElementById (' example ')
);

Example 2:var arr = [

];
Reactdom.render (
<div>{arr}</div>,
document.getElementById (' example ')
);

The JSX has the following advantages: 1.JSX executes faster because it is optimized after compiling into JavaScript code.

2. It is type-safe and can be found during compilation.

3. Writing templates with JSX is much easier and faster.

Third, component API

1. Setting Status: SetState

2. Replacement Status: Replacestate

3. Set the property SetProps

4. Replace attribute Replaceprops

5. Mandatory update: ForceUpdate

6. Get DOM node: Finddomnode

7. Determine the component Mount Status: ismounted

8. Build Component class: Createclass

(about Createclass): React allows the code to be encapsulated as a component (component) and then inserted into a Web page like a normal HTML tag. The React.createclass method is used to generate a component class

Note: To add component properties, it is important to note that the class attribute needs to be written as ClassName, and the for property needs to be written as htmlfor because the for and class are keywords in JS (other properties can be used directly)

Cases:

var hellomessage = React.createclass ({
Render:function () {
Return (
<div>
<a href={this.props.site}>{this.props.site}</a>
</div>

)
}
});

Reactdom.render (
document.getElementById (' example ')
);

Composite components: Compositing a component by creating multiple components

var hellomessage = React.createclass ({
Render:function () {
Return (
<div>
<name name={this.props.name}/>
<site site={this.props.site}/>
</div>
)
}
});

var Name = React.createclass ({
Render:function () {
Return }
});
var Site = React.createclass ({
Render:function () {
return <a href={this.props.site}>{this.props.site}</a>
}
});

Reactdom.render (
document.getElementById (' example ')
);

Iv.. This.props.children Properties

As mentioned in the previous example, This.props indicates that the object's properties correspond to the component's property one by one, but the This.props.children property represents all the child nodes of the component

var noteslist = React.createclass ({
Render:function () {
Return (
<ol>
{
React.Children.map (This.props.children, function (child) {

Return <li>{child}</li>;

)
}
</ol>
);
}
});

Reactdom.render (
<NotesList>
<span>LiLei</span>
<span>HanMeimei</span>
</noteslist>,
document.getElementById (' example ')
);

There are three possible values for This.props.children: 1. If the current component has no child nodes, it is undefined

2. If there is a child node, the data type is Object

3. If there are multiple sub-nodes, the data type is array

V. React State (status)

Interacting with the user, resulting in a state change, re-rendering the user interface (often used in the input box) based on the new states

var Input = React.createclass ({
Getinitialstate:function () {
return {value: ' hello! '};
},
Handlechange:function (event) {
This.setstate ({value:event.target.value});
},
Render:function () {
var value = This.state.value;
Return (
<div>
<input type= "text" Value={value} Onchange={this.handlechange}/>
<p>{value}</p>
</div>
);
}
});

Reactdom.render (<input/>, document.getElementById (' example '));

Note: Because both This.props and this.state are used to describe the characteristics of a component, confusion can occur. A simple way to differentiate is that this.props means that once defined, the feature is no longer changed, and the this.state feature changes as the user interacts.

Vi.. Proptypes Properties

is used to verify that the properties of a component instance meet the requirements: sometimes we need a mechanism to verify that when someone uses the component, the supplied parameters meet the requirements (provided to the code staff for their own identification)

var data = ' 123 ';

var MyTitle = React.createclass ({
Proptypes: {
Title:React.PropTypes.number,
},

Render:function () {
Return }
});

Reactdom.render (
<mytitle Title={data}/>
document.getElementById (' example ')
);

Result: normal output "123", open Developer tool will have an error output (specific can try)

Vii. Properties of refs

A component is not a real DOM node, but rather a data structure that exists in memory, called a virtual dom. Only when it is inserted into the document will it become the real DOM. According to the design of React, all DOM changes occur first on the virtual DOM, and then the actual changes are reflected in the real DOM, which is called Dom diff, which can greatly improve the performance of the Web page.

This.refs[myrefsname] Get the real DOM node

var mycomponent = React.createclass ({
Handleclick:function () {
This.refs.myTextInput.focus ();
},
Render:function () {
Return (
<div>
<input type= "text" ref= "Mytextinput"/>
<input type= "button" value= "Click to write" Onclick={this.handleclick}/>
</div>
);
}
});

Reactdom.render (
<mycomponent/>
document.getElementById (' example ')
);

Viii. the life cycle of components

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

1. Mounting: The real DOM is inserted

2, Updating: is being re-rendered

3. 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, with three states totaling five processing functions + two special state processing functions;

See also: https://facebook.github.io/react/docs/react-component.html

IX, React AJAX

The data for the React component can be obtained through Ajax in the Componentdidmount method, and when the database is fetched from the server, the data can be stored in the state, and the UI is re-rendered using the This.setstate method.

When loading data asynchronously, use Componentwillunmount to cancel an outstanding request before the component is unloaded.

var usergist = React.createclass ({
Getinitialstate:function () {
return {
Username: ",
Userhobby: "
};
},
Componentdidmount:function () {
$.get (This.props.source, function (result) {
This.setstate ({
Username:result.name,
Userhobby:result.hobby
});
}.bind (this), ' json ');
},

Render:function () {
Return (
<div>
<p> name: {this.state.username} </p>
<p> Hobbies: {this.state.userhobby} </p>

</div>
);
}
});

Reactdom.render (
<usergist source= "http://localhost/testdata.php"/>
document.getElementById (' example ')
);

Talking about React