React.js 基础入门三 ---组件状态state

    React 组件实例在渲染的时候创建。这些实例在接下来的渲染中被重复使用，可以在组件方法中通过 this 访问。唯一一种在 React 之外获取 React 组件实例句柄的方式就是保存React.render 的返回值。在其它组件内，可以使用 refs 得到相同的结果(后面会简单解释refs)。

     从上几章的学习，我们可以这么理解组件，学过php的Yii框架的都知道widget组件，react.js定义一个组件，通过在组件中定义各种'方法',‘属性’最后通过render来渲染这个组件。

    其中<组建名称 /> 这种形式的调用，类似Yii框架中的$this->widget()来生成视图。

    

下面来说一下组件的状态：

index.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 (
			

				
This is React.JS
				

				

				
{this.state.titles}
				
{this.state.names}
			
		);
	}
});

var ShowBox = React.createClass({
	alertX : function (){
		alert('弹弹弹死你们！');
	},

	render:function (){
		var styleOptions = {
			width: '1000px',
			height: '100px',
			background: '#789798'
		};
		return(
			
			

); } }); var ReactObj = React.render( , 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 (
			

					
				
  
				

			
		);
	}

写的不够详尽，有待改善，请大牛指点一二。

The End!