React 拨开迷雾 props state

学习React 时一直对 props state 混淆不清，今天来捋一捋。好记性不如烂笔头！
props:英文中是properties.可以使用它把任意类型( arbitrary inputs)的数据传递给组件.所以我们尽可能把props当成数据源,它有着传递数据的作用.
下面的例子自定义带有参数的组件 Text ：

var Text = React.createClass({            
    render: function() {             
      return (                   
         大家好，我是用{this.props.name}渲染出来的！age={this.props.age}                   
       );   
   }     
 });        
ReactDOM.render(<Text name={"react"} age={181}/>,document.getElementById('well'));

浏览器显示结果：

state:每个组件都可以拥有自己的state,state 与 props的区别在于 state 只存在于组件的内部

下面的例子体现了state 保存了该组件Application的必要数据，即下拉框是否显示的布尔值：

let Application = React.createClass({  
  getInitialState: function () {    
     return {      showOptions: false    };  },  
  render: function () {   
     let options;   
     if (this.state.showOptions) {     
       options = (<ul id="options">           
                   <li>apple</li>             
                   <li>banana</li>            
                   <li>pear</li>          
                  </ul>      )    
   }    
    return (       
     <div className="dropdown" onClick={this.handleClick}>
      <button>Choose a fruit</button>{options}        
     </div>   
     )  }, 
  handleClick: function () {   
     this.setState({      showOptions: true    }); 
 }
});

浏览器中点击 Choose a fruit 则出现了下拉框：

可通过 https://github.com/yujuan123/react-state-starter 地址亲手实践该demo

总结：
state 保存组件正常工作时的必要数据。比如前面出现过的用来表示下拉框是否显示的布尔（true or false）,再比如表单验证时的出错信息显示等等。this.props表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。
注意：
1.避免在组件内部修改 this.props，请把props 当作是只读的。
2.使用this.setState来设置状态，而不要使用this.state直接修改状态

对props state 最好的理解莫过于 概念了解+demo试验，所以后续我将对props在组件树上传递数据进行讨论，敬请期待哦！