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(,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 = (
  • apple
  • banana
  • pear
) } return (
{options}
) }, handleClick: function () { this.setState({ showOptions: true }); } });

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

React 拨开迷雾 props state_第1张图片

可通过 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在组件树上传递数据进行讨论,敬请期待哦!

你可能感兴趣的:(React 拨开迷雾 props state)