React.js Basic Introduction Three---component Status State

React Component instances are created when rendering. These instances are reused in the next rendering and can be accessed through this in the component method. The only way to get the React component instance handle outside of React is to save the return value of the React.render. Within other components, you can use refs to Get the same result (refs is explained briefly later).

From the last few chapters of the study, we can understand the components so, learn PHP's YII framework knows widget components, React.js defines a component, by defining various ' methods ' in the component, ' properties ' to render this component through render.

Where the < build name/> This form of invocation, similar to the $this->widget () in the YII framework to generate the view.

Here's the status of the component:

Index.html

Directly on the contents of the JS file:
 index.js  
 
Var messagebox = react.createclass ({getinitialstate :function  () {  // This method is built-in method return {titles :  "bunker of title!",names:  ' egg-sore name ', Contents: ' Asdfghjklzxcvbnmqwertyuiop ', }},changestate:function () {Var s = math.floor (Math.random () *20) Var e = math.floor (Math.random () *20) this.setstate ({names:this.state.names+this.state.contents.substr (s , e)});},render :function  () {return  (<div>
Explain:
As for the Showbox components, there is no need to say more,
Let's take a look at the MessageBox component, Getinitialstate is the react built-in method, which is called in the following way:
{This.state.names}
You can think of This.state as immutable (read-only), because calling SetState () later may replace the changes you make,
If you force the modification, you can use the React object to invoke the ForceUpdate () method to update the changes.

After the react render render is complete, a react object is returned, which contains all the properties, methods.

It is well known that react.js renders the entire DOM to update the changes, so how does react.js execute quickly and efficiently?
React is fast because it never directly operates the DOM. React maintains a fast-responding DOM description in memory. The render () method returns a description of the DOM, react can use the in-memory description to quickly calculate the difference, and then update the DOM in the browser.

Mount the DOM:
What is a mount? And the react component is rendered into the DOM, only the component is rendered to invoke the GetDOMNOde () method to get the DOM (and what can be called a DOM object) generated after this component is rendered to modify some of the attributes of the element.
What do I do if I get a reference to a component when there is no rendering component?
(similar to Yii in how to get the current controller in the component Live widget)
 You can use this to get the current react component, or you can use refs to point to a component that you own 
Detail code:
Focusinput:function () {var refsnode = This.refs.test_ref.getDOMNode (); Refsnode.focus (); refsnode.title= "90design";}  , Render:function () {return (<div><p><input type= "text" ref= "Test_ref" value= "Test refs"/></p> <!--try to change the value of input! --><p><input type= "button" Onclick={this.focusinput} value= "Click Test Refs"/></p></div>);

Write not exhaustive, need to improve, please Daniel pointing twos.

The end!
This article from the "90 Design Studio" blog, reproduced please contact the author!
React.js Basic Introduction Three---component Status State