Home > Developer > Web Develop
React is a library of UI classes developed by Facebook for component-driven development (CDD), with a one-way data flow binding relative to a two-way bound class library, such as Angularjs. By adopting the concept of virtual DOM, he is faster than other class libraries in terms of performance and processing speed. Does not directly understand it as the front-end MVC, at most he is the part of V, of course, he is not limited to what kind of frame you use, so in the existing ANGULARJS framework, you can also mix Reactjs, replace his directive, never solve ng-repeat that heavy work.
Previously, react was quick because he did not speak directly to the DOM. React maintains a virtual DOM stored in memory, renders DOM objects through the render () method, react the differences in memory compared to the DOM to update the browser's display effect
Talk about react difference algorithm
Whenever you call the SetState method, react will mark the current component. Finally react will identify these tagged components and re-render them. 1 is shown below:
(Fig. 1)
Start the Reactjs tourFirst we need to download the relevant class library, address: React Starter Kit
To create our page, we first need to refer to 2 files, one react.js and jsxtransformers.js.
<HTML> <Head> <Scriptsrc= "React.js"></Script> <Scriptsrc= "Jsxtransformer.js"></Script> </Head> <Body> <DivID= "Mydiv"></Div> <Scripttype= "TEXT/JSX"> /** @jsx react.dom*/React.render (<H1>Hello, World!</H1>,document.getElementById (' mydiv ')); </Script> </Body> </HTML>
Of course, we can also use browerify and Webpack to package our script files.
About JSXThe syntax conversion of Jsx:javascript XML allows you to use HTML tags in Javascript files.
However, some labels, such as class, for, correspond to classname and htmlfor in JSX. This is because react need to keep some of the JavaScript keywords
If you do not use JSX, the code above is as follows:
React.render ( React.DOM.h1 (null, ' Hello, world! '), document.getElementById (' mydiv ') );We can use Createclass to create custom components.
Var mycomponent = React.createclass ({ render:function ()} { return (<H1 >Hello, world! </ H1 > ); }}); React.render () <mycomponent/>, document.getElementById (' mydiv ');When we use custom-defined components, we need to invoke the properties of our components, which can be passed This.props way.
var MyComponent = React.createclass ({ function() { return ( this ); } ); React.render ( <mycomponent name= "Handsome"/>, document.getElementById (' mydiv ') );As above, the custom component MyComponent's property name, in render rendering, is passed through This.props one-way. About the delivery of multi-component, follow-up explanation.
Life cycle, some initialization related functionsWhen creating a component, we only need the render method for rendering, but react also provides events and methods such as life cycle execution events. This helps us to better manipulate the components when we create the components.
1. Life cycle
Here is a brief introduction to the main 4 life cycle execution methods, listed in order of execution
Componentwillmount: Executes before rendering render, and executes only once.
Componentdidmount: Executes once when render render has occurred, only once.
Shouldcomponentupdate: The access value determines whether the component is updated.
Componentwillunmount: Executed before uninstalling the component.
2. Other events
Getinitialstate: Returns the value of the initialized state
Getdefaultprops: Set default value for props
A Mixins:array object set that extends the functionality of the current component.
For more detailed introduction and use, please see the official instruction book, click here.
About StateAll react components have their own state objects and props objects. The state's settings are executed through the SetState method, and the UI update is triggered when the setstate is called. If we want to initialize state we can use the Getinitialstate method.
The following is a simple way to use state.
var MyComponent = React.createclass ({ function() { return {count:5 } }, function() { return ( this ) });React supports cross-browser events, which are used as properties of the component.
/** @jsx React. DOM*/ varCounter =React.createclass ({incrementcount:function(){ This. SetState ({count: This. State.count + 1 }); }, Getinitialstate:function(){ return{count:0}}, Render:function(){ return ( <div class= "My-component" > This.state.count} This.incrementcount}>increment</button> </div>); } }); React.render (<counter/>, document.getElementById (' mydiv '));Unidirectional Data Flow
In react, the fundamental difference between a two-way data-bound class library, such as: Angularjs, is that it interacts with a one-way data stream through state and props objects. This means that at the multi-component blending level, the parent component needs to retain and manage the state object and pass the props object to all child component objects.
When you need to refresh the UI interface, your state needs to be updated through the SetState method. The values of these state will again be passed along with the props object of the child component's properties.
var List = React.createclass ({ function() { return ( <ul > { this. Props.items.map (function(item) { return <li key={item}>{item}</li> }</ul> );} ) ;var filteredlist= react.createclass ({
Filterlist:function (event) {
var updatelist = This.state.initialItems;
Updatedlist = Updatedlist.filter (function (item) {
Return Item.tolowercase (). Search (
Event.target.value.toLowerCase ())!==-1;
});
This.setstate ({items:updatedlist});
},
Getinitialstate:function () {
return {
Initialitems: [
"Apples",
"Duck",
"Fish"
],
Items: []
}
},
Componentwillmount:function () {
This.setstate ({items:this.state.initialItems})
},
Render:function () {
Return
<div classname= "Filter-list" >
<input type= "text" placeholder= "search" onchange={this.filterlist}/>
<list items={this.state.items}/>
</div>
);
}
});
React.render (<filteredlist.>, document.getElementById (' mydiv '));
As above, in a mixed component, the list's properties items are the This.state.items values of the parent component and are used in the list component with the property this.props.
Reactjs Getting Started
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
