React Getting Started--------component API

SetState

Parameters: Nextstate (object), [Callback (function)]

Sets a key value for the nextstate. Usually if you want to re-render the component in an event or a callback, SetState is the most common trigger method because we bind the UI content directly to the state, and as soon as it changes and touches the logic of the binding, the UI content will naturally change:

 varComponent1 =React.createclass ({getinitialstate:function () {return{isclick:!1}}, Componentdidupdate:function () {Console.log ('componentdidupdate')}, Clickcb:function () { This. SetState ({isclick:!0}, Function () {Console.log ( This. State.isclick)}) }, Render:function () {return(<div onclick={ This.clickcb}>isclick:{ This. State.isclick?'Yes':'Nope'}            </div>)        }    }); vardiv = document.getElementById ('a'); Reactdom.render (<component1/>, div);

As above through State.isclick to determine what to display in the Div, and we click on the div will change the state of State.isclick, triggering the binding condition changes the contents of the Div.

The results of the operation are as follows:

Note: The callback for this method is performed after re-rendering.

Replacestate

Parameters: Nextstate (object), [Callback (function)]

Replace the state as a whole, and the callback method executes after re-rendering.

ForceUpdate

Parameters: [Callback (function)]

Force rendering of components at any call, even if using Shouldcomponentupdata returns false

Note: The callback for this method is also performed after re-rendering.

Getdomnode

Returns the DOM element that the component/reactelment mounts to on the page

 varComponent1 =React.createclass ({getinitialstate:function () {return{isclick:!1}}, Clickcb:function () { This. SetState ({isclick:!0}, Function () {Console.log ( This. State.isclick)}) }, Render:function () {return(<div onclick={ This.clickcb}>isclick:{ This. State.isclick?'Yes':'Nope'}            </div>)        }    }); vardiv = document.getElementById ('a'); varc =Reactdom.render (<component1/>, Div); Console.log (C.getdomnode ())

ismounted

Returns a Boolean value that ismounted () returns True if the component is mounted to the DOM

varUsergist =React.createclass ({getinitialstate:function () {return{username:"', Lastgisturl:"'    }; }, Componentdidmount:function () {$.Get( This. Props.source, function (result) {varLastgist = result[0]; if( This. ismounted ()) {         This. SetState ({username:lastGist.owner.login, lastGistUrl:lastGist.html_url}); }}.bind ( This)); }, Render:function () {return (      <div>        { This. State.username}'s last gist is<a href={ This.state.lastgisturl}>here</a>. </div>    ); }}); Reactdom.render (<usergist source="https://api.github.com/users/octocat/gists"/>, document.body);

SetProps

Parameters: Nextprops (object), [Callback (function)]

Similar to SetState, but modified by props.

Replaceprops

Parameters: Nextprops (object), [Callback (function)]

Similar to Replacestate, but modified by props.

Refs

This method is not part of a component, but it is also a common technique used in components

As mentioned earlier, you can use the Reactclass.getdomnode () method to get the DOM node that the component renders on the page, but what if you want to get to a DOM element in the component?

 varComponent1 =React.createclass ({clickcb:function (e) {if(E.target = = = This. Refs.li2.getDOMNode ()) {Alert ('you ordered the second li.')}}, Render:function () {return(<ul onclick={ This.clickcb}> <li>1</li> <liref="Li2">2</li> <li>3</li> </ul>)        }    }); vardiv = document.getElementById ('a'); Reactdom.render (<component1/>, div);

The second Li in the component is bound to a ref attribute with a value of li2, which means that the change reactelement can be obtained in this.refs.li2 form in the component. Then bind the point-click event to determine whether the clicked Li Element equals This.refs.lis.getDOMNode9 () when clicked.

Let's look at an example below:

 varAPP =React.createclass ({getinitialstate:function () {return{userinput:"'}; }, Handlechange:function (e) { This. SetState ({userinput:e.target.value}); }, Clearandfocusinput:function () {//Clear the input       This. SetState ({userinput:"'}, Function () {//This code is executed immediately after the component is redrawn:         This. Refs.theInput.getDOMNode (). focus ();//Input successful focus (focus)      }); }, Render:function () {return (        <div> <div onclick={ This.clearandfocusinput}>Click to Focus and Reset</div> <inputref="Theinput" //we can get it in the component with This.refs.theInput.value={ This. State.userinput} onChange={ This. HandleChange}/> </div>      ); }  });

React Getting Started--------component API