React.js 基础入门三 ---组件状态state
React 组件实例在渲染的时候创建。这些实例在接下来的渲染中被重复使用，可以在组件方法中通过 this 访问。唯一一种在 React 之外获取 React 组件实例句柄的方式就是保存React.render 的返回值。在其它组件内，可以使用 refs 得到相同的结果(后面会简单解释refs)。
从上几章的学习，我们可以这么理解组件，学过php的Yii框架的都知道widget组件，react.js定义一个组件，通过在组件中定义各种'方法',‘属性’最后通过render来渲染这个组件。
其中<组建名称 /> 这种形式的调用，类似Yii框架中的$this->widget()来生成视图。
下面来说一下组件的状态：
index.html
<html> <head> <meta charset="utf-8"> </head> <body> <div id = "app_react"></div> <script src="build/react.js"></script> <script src="build/JSXTransformer.js"></script> <!--此处把react部分的js独立出来了--> <script type="text/jsx" src="index.js" charset="utf-8"></script> </body> </html>
直接上js文件的内容：
index.js
var MessageBox = React.createClass({
getInitialState :function (){ //此方法是内置方法
return {
titles : "碉堡的title!",
names: '蛋疼的名字',
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>
<h1>This is React.JS</h1>
<ShowBox/>
<p><input type="button" onClick={this.changeState} value="尽情的点我"/></p>
<p>{this.state.titles}</p>
<p>{this.state.names}</p>
</div>
);
}
});
var ShowBox = React.createClass({
alertX : function (){
alert('弹弹弹死你们！');
},
render:function (){
var styleOptions = {
width: '1000px',
height: '100px',
background: '#789798'
};
return(
<div style={styleOptions}>
</div>
);
}
});
var ReactObj = React.render(
<MessageBox/>,
document.getElementById('app_react'),
function(){
console.log("渲染成功！")
}
);
讲解：
至于ShowBox组件，就不用多说了，
我们来看看MessageBox组件，getInitialState是React内置的方法，调用的方式是：
{this.state.names}
可以把this.state当做不可变的（只读的），因为在之后调用 setState() 可能会替换掉你做的更改，
如果强制修改，可以用React对象调用forceUpdate()的方法更新更改。
在React render渲染完成后，会返回一个React对象，这个对象会含有所有属性，方法。
众所周知，react.js会渲染整个DOM来更新变化，那么React.js是如何快速高效地执行的呢？
React是很快的，因为它从不直接操作DOM。React在内存中维护一个快速响应的DOM描述。render()方法返回一个DOM的描述，React能够利用内存中的描述来快速地计算出差异，然后更新浏览器中的DOM。
DOM的挂载：
是什么是挂载？ 及React组件被渲染到DOM中，只有组件被渲染才可以调用getDOMNode() 方法来获取 本组件渲染后生成的DOM（及可称作 DOM对象）， 来修改元素的一些属性。
如果在无渲染组件的时候， 获取一个组件的引用 ， 该怎么做？
（类似Yii中 在组件活小部件中 怎么获取当前controller一样）
你可以使用this来得到当前的React组件，或者你可以使用refs来指向一个你拥有的组件
详细件代码：
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="测试refs"/></p> <!--试试可以修改input的值吗！-->
<p><input type="button" onClick={this.focusInput} value="点击测试refs" /></p>
</div>
);
}
写的不够详尽，有待改善，请大牛指点一二。
The End!
本文出自 “90设计工作室” 博客，转载请与作者联系！