您的位置：首页 > 运维架构 > Tomcat

一台电脑上同时运行两个tomcat

2012-05-24 15:25 453 查看

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设计工作室” 博客，转载请与作者联系！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航