您好,欢迎来到二三四教育网。
搜索
您的当前位置:首页React 拨开迷雾 props state

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 则出现了下拉框:

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

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

Copyright © 2019- how234.cn 版权所有 赣ICP备2023008801号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务