state

每一个组件都能拥有自己的state,state和props的区别在于state只存在于组件的内部。还有一个简单的区分方法是this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

state可以通过setstate来修改，也可以通过getInitialState方法提供一组默认值，写法和props类似。

在这里要注意：

• 千万不能直接修改this.state,永远记得用this.setstate方法修改。
• 不要在state里面保存计算的值，应该只保存最简单的数据，比如勾选状态checked。
• 不要尝试把props复制到state中，把props当中数据源。

State 工作原理

常用的通知 React 数据变化的方法是调用 setState(data, callback)。这个方法会合并（merge） data 到 this.state，并重新渲染组件。渲染完成后，调用可选的 callback回调。大部分情况下不需要提供 callback，因为 React 会负责把界面更新到最新状态。

哪些组件应该有 State？

大部分组件的工作应该是从 props 里取数据并渲染出来。但是，有时需要对用户输入、服务器请求或者时间变化等作出响应，这时才需要使用 State。

** 尝试把尽可能多的组件无状态化。** 这样做能隔离 state，把它放到最合理的地方，也能减少冗余，同时易于解释程序运作过程。

常用的模式是创建多个只负责渲染数据的无状态（stateless）组件，在它们的上层创建一个有状态（stateful）组件并把它的状态通过 props 传给子级。这个有状态的组件封装了所有用户的交互逻辑，而这些无状态组件则负责声明式地渲染数据。

哪些应该作为 State？

State 应该包括那些可能被组件的事件处理器改变并触发用户界面更新的数据。真实的应用中这种数据一般都很小且能被 JSON 序列化。当创建一个状态化的组件时，想象一下表示它的状态最少需要哪些数据，并只把这些数据存入 this.state。在 render() 里再根据 state 来计算你需要的其它数据。你会发现以这种方式思考和开发程序最终往往是正确的，因为如果在 state 里添加冗余数据或计算所得数据，需要你经常手动保持数据同步，不能让 React 来帮你处理。

哪些不应该作为 State？

this.state 应该仅包括能表示用户界面状态所需的最少数据。因此，它不应该包括：

• 计算所得数据： 不要担心根据 state 来预先计算数据 —— 把所有的计算都放到render() 里更容易保证用户界面和数据的一致性。例如，在 state 里有一个数组（listItems），我们要把数组长度渲染成字符串， 直接在 render() 里使用this.state.listItems.length + ' list items' 比把它放到 state 里好的多。
• React 组件： 在 render() 里使用当前 props 和 state 来创建它。
• 基于 props 的重复数据： 尽可能使用 props 来作为惟一数据来源。把 props 保存到 state 的一个有效的场景是需要知道它以前值的时候，因为未来的 props 可能会变化。

this.state

组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染UI。

示例：

  var LikeButton = React.createClass({    
getInitialState: function() {      
return {liked: false};    
},    
handleClick: function(event) {      
this.setState({liked: !this.state.liked});    
},    
render: function() {      
var text = this.state.liked ? 'like' : 'haven\'t liked';      
return (        
<p onClick={this.handleClick}>          
You {text} this. Click to toggle.        
</p>      
);    
}  
});    
ReactDOM.render(    
<LikeButton />,    
document.getElementById('example')  
);  

上面代码是一个 LikeButton 组件，它的 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。