On React works: https://www.cnblogs.com/yikuu/p/9660932.html
Reactjs originated Facebook internal project, is used to build a user interface library javascript, V layer frame corresponding to the MVC architecture, with the other frame is different from the market, React to each component as a state machine, internal components changes in the components to maintain state by state, when the state of the component changes, React and efficient update by incremental virtual real DOM DOM technology. These features React article will be brief.
A simple React components - HelloReactTaking into account some students do not even know had React, let's write a simple React component that allows everyone to see it!
1 // Create a HelloReact assembly
2
. 3 = var HelloReact React.createClass ({
. 4
. 5 the render: function () {
. 6
. 7 return (
. 8
. 9 <div>
10
! React. 11 the Hello
12 is
13 is </ div>
14
15)
16
. 17 }
18 is
. 19});
20 is
21 is used HelloReact // assembly
22 is
23 is ReactDOM.render (
24
25 <HelloReact />,
26 is
27 document.querySelector ( 'body')
28
29)
This defines a React component, of course, to run this code is conditional on the introduction React libraries also need to introduce JSX syntax conversion library, where not much to say, these basic things you need to do hands-on!
React core technologies - Virtual DOM (Virtual DOM)In the process of front-end development, the data is to change one thing we often do real-time updates to the UI, then you need to be updated and re-DOM rendering, DOM operations and frequent cause of performance bottlenecks usually generated one, sometimes we encounter such an awkward situation: for example, there is a list of data, when the user performs a refresh operation, Ajax will re-request the data from the background, even if the data is identical and the last new request, DOM also It will be updated all over again and re-rendered, thus creating unnecessary performance overhead.
React to this end the introduction of virtual DOM (Virtual DOM) mechanism: For each component, React builds a corresponding DOM tree in memory, all of the DOM structure is done through virtual DOM based upon React development, whenever components when the state changes, React DOM will rebuild the entire data and the current time and the whole DOM tree DOM tree by comparing results of the DOM structure changes (patchs), and then these patchs then updated to the real DOM . The entire process is carried out in memory, so it is very efficient. Borrowing a map clearly indicates the working mechanism of virtual DOM:
React to each component as a state machine to maintain and manage, so every component has a complete life cycle can be divided into three processes: initialization, update and destroyed. Each process life cycle have clearly reflects the change in state assembly. For developers who can easily grasp the status of each component, different states corresponding period do things without disturbing each other. The following are the components and lifecycle of several methods:
1 getDefaultProps // Create form 2 . 3 // Example getInitialState that status . 4 . 5 // componentWillMount front mount . 6 . 7 componentDidMount // Once mounted . 8 . 9 is changed when the properties componentWillReceiveProps // 10 . 11 // whether to update shouldComponentUpdate 12 is 13 is componentWillUpdate / / before updating 14 15 componentDidUpdate // updated 16 17 componentWillUnmount // before destruction
For external systems, a separate component is present in the closed system, the internal logic is hidden, only the external interface to transfer data exposure, and React provides us with two ways to transfer data to a component, i.e., props and state.
When the call is by props ReactDOM.render () xxx transfer tag attributes, and is acquired by this.props.xxx, getDefaultProps allows you a default value for the assembly is provided props, default values are displayed in the absence of transmission of props.
1 // Create HelloReact assembly
2
. 3 = var HelloReact React.createClass ({
. 4
. 5 / **
. 6
. 7 * default value is displayed when the set default value when no props pass
. 8
. 9 * @return {}
10
. 11 * /
12 is
13 is getDefaultProps: function () {
14
15 {return
16
. 17 data: "no data"
18 is
. 19}
20 is
21 is},
22 is
23 is the render: function () {
24
25 return (
26 is
27 <div>
28
29 // display data, when a change occurs automatically updated props
30
31 is this.props.data {}
32
33 is </ div>
34
35 )
36
37 }
38
39 });//传递props属性data
40
41 ReactDOM.render(
42
43 <HelloReact data={"Hello React!"} />,
44
45 document.querySelector('body')
46
47 )
And props are different, state can not be transmitted outside, so before use state, state needs to set a default value, and in order to be accessed by this.state.xxx getInitialState, when the mounted assembly is completed, trigger componentDidMount the method, we can here in the server data request by Ajax, then the state is set to the value of real data by setState ().
// Create HelloReact assembly
var HelloReact = React.createClass ({
/ **
* Set the initial value of the component
* {{@Returns Data: the Array, MSG: String}}
* /
getInitialState that: function () {
return {
Data: "Data loading ... "// initial value []
}
}
/ **
* after loading the first load data
* /
componentDidMount: function () {
this.requestData (); // request data
}
/ **
* background data request
* /
requestData: function () {
$ .ajax ({
URL: 'xxxx.ashx',
data: {},
Success: function (data) {
this.setState ({
Data: Data by the setState // () Update Server Data
})
}
} .bind (the this))
},
the render: function () {
return (
<div>
{this.state.data}
</ div >
)
}
});
ReactDOM.render (
<HelloReact />,
document.querySelector ( 'body')
)
Update
props property is read-only, if you want to change the value of props, props can only be delivered through a new re-calling render (), but it should be noted that the re-run render () will not be re-mounted components, but virtual technology through incremental update DOM and rendering, then also trigger componentWillReceiveProps methods and new props passed as a parameter, you can process the new props here.
The props compared, born to reflect the state status of the components, so its value can be changed, when the state value is changed, the value can be changed by setState state, and is also React technique for calculating the virtual DOM section needs to be updated, rather than pull a body launched an update and rendering.
When the state props and state changes, the assembly just before the update will trigger a method called shouldConponentUpdate if shouldConponentUpdate returns true, regardless of props and a state value and the comparison has not changed, React will be old honest real comparison. At this point, if you are determined, and certainly twice the data has not changed, then let shouldConponentUpdate returns false, React would not be diff, and will not re-rendering. Instantly eliminates the time diff.
destroyWhen the assembly is removed from the DOM, React will destroy it. Before the destruction, careful React also trigger componentWillUnmount to inform you, see you finally have no words for this component is about to be destroyed would like to say that, of course, you would not have nothing.
When to use props, when to use stateWe already know props and can be passed to the component state data in two ways, props can not be changed is read, and the state is used to reflect the state of a component, it can be changed. Therefore, when the data components needed when you call is already established, do not change frequently, you can use props to pass, on the contrary, when the data required components can not be determined at the time of call, we need to wait for an asynchronous callback to determine such as ajax request data, input the onchange event, then you need to use the state to record and change these worthwhile changes.