ReactJS State

我们通过使用getInitialState方法定义组件的初始state属性。

/*** @jsx React.DOM */
var APP = React.createClass({
getInitialState: function() {
return {
txt: 'this is some text from initial state'
}
},
render: function(){
return (
<div>
<h1>Hello React</h1>
<p>{this.state.txt}</p>
</div>
)
}
});
React.renderComponent(<APP />, document.body)

在组件完成加载之后，我们可以通过setState方法来改变我们设置的属性的值。

首先在render函数中加入一个input元素，用于触发onChange事件，然后调用setState方法来设置状态。

/*** @jsx React.DOM */
var APP = React.createClass({
getInitialState: function() {
return {
txt: 'this is some text from initial state'
}
},
updateTxt: function(e) {
this.setState({txt: e.target.value})
},
render: function(){
return (
<div>
<input type="text" onChange={this.updateTxt} />
<p>{this.state.txt}</p>
</div>
)
}
});

运行以上代码后，当我们在文本框中输入任意文本后，就会触发绑定的onChange事件，之后调用我们定义好的updateTxt方法，从而最终通过setState方法来更新state的数据。

使用replaceState()也是可以替换state的值的.

/**
* @jsx React.DOM
*/

var InterfaceComponent = React.createClass({
getInitialState : function() {
return {
first : "chris",
last  : "pitt"
};
},
handleClick : function() {
this.replaceState({
first : "bob"
});
},
render : function() {
return <div onClick={this.handleClick}>
hello { this.state.first + " " + this.state.last }
</div>;
}
});

当你想要清除一些已经在state里面存在的值并且追加一些新值的时候可以使用replaceState()。

当你使用state的时候, 你承担着组件的渲染和行为会出现错误的风险，因此要尽量减少使用state，并且不要在静态的组件上使用state，如果你的组件基于外部因素不需要改变那么就不要使用state，在render()里面计算渲染的值更好。