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

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

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

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

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

index.html

<html>
	<head>
		<metacharset="utf-8">
	</head>
	<body>
		<divid="app_react"></div>
	
	
		<scriptsrc="build/react.js"></script>
		<scriptsrc="build/JSXTransformer.js"></script>
		<!--此处把react部分的js独立出来了-->
		<scripttype="text/jsx"src="index.js"charset="utf-8"></script>
	</body>
</html>

直接上js文件的内容：

index.js

varMessageBox=React.createClass({
	getInitialState:function(){//此方法是内置方法
		return{
			titles:"碉堡的title!",names:'蛋疼的名字',contents:'asdfghjklzxcvbnmqwertyuiop',}
	},changeState:function(){
		vars=Math.floor(Math.random()*20)
		vare=Math.floor(Math.random()*20)
		this.setState({
			names:this.state.names+this.state.contents.substr(s,e)
		});
	},render:function(){
		return(
			<div>
				<h1>ThisisReact.JS</h1>
				<ShowBox/>

				<p><inputtype="button"onClick={this.changeState}value="尽情的点我"/></p>
				<p>{this.state.titles}</p>
				<p>{this.state.names}</p>
			</div>
		);
	}
});

varShowBox=React.createClass({
	alertX:function(){
		alert('弹弹弹死你们！');
	},render:function(){
		varstyleOptions={
			width:'1000px',height:'100px',background:'#789798'
		};
		return(
			<divstyle={styleOptions}>
			</div>
		);
	}
});

varReactObj=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(){
		varrefsNode=this.refs.test_ref.getDOMNode();
		refsNode.focus();
		refsNode.title="90design";
	},render:function(){
		return(
			<div>
					
				<p><inputtype="text"ref="test_ref"value="测试refs"/></p><!--试试可以修改input的值吗！-->
				<p><inputtype="button"onClick={this.focusInput}value="点击测试refs"/></p>
			</div>
		);
	}

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

The End!

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

相关推荐