当前位置:   article > 正文

关于props与state的基础知识与区别_props.item

props.item

父组件通过props向子组件传递数据。父组件通过item={item}这种方式向子组件传递数据,子组件通过this.props.item 来获取数据。

  1. //父组件
  2. <ul className="list">
  3. <todos.map((item,index)=>{
  4. return <Item item={item}/>
  5. })}
  6. </ul>
  1. //子组件
  2. class Item extends Component{
  3. render(){
  4. const item=this.props.item;
  5. return(
  6. <li className="item">{item}</li>
  7. )
  8. }
  9. }

props是一个从外部传进组件的参数,由于React具有单向数据流,所以它的主要作用是从父组件向子组件传递数据,它是不可改变的。如果想要改变它,只能通过外部组件传入新的props来重新渲染子组件,否则子组件的props以及展现形式不会改变。

props除了可以传字符串、数字,还可以传数组,对象、甚至是回调函数。

 

state的主要作用是用于组件保存、控制以及修改自己的状态,它只能在constructor中初始化,state是可以被改变的。state放改动的一些属性,比如点击选中,再点击取消。类似的这种属性就可以放到state里。

没有state的叫做无状态组件,多用props少用state,多写无状态组件。

  1. class Item extends Component{
  2. constructor(props){
  3. super(props);
  4. this.state={
  5. selected:false;
  6. }

还有一点要特别注意,在修改state的值时,直接对它操作是不行的。

  1. //无效的
  2. this.state.selected=!this.state.selected;

必须通过setState()方法。当我们调用this.setState方法时,React会更新组件的数据状态state,并且重新调用render方法.

  1. //有效
  2. this.setState({
  3. selected:!this.state.selected
  4. });

主要区别:state是组件自己管理数据,控制自己的状态,值是可以改变的;props是外部传入的数据参数,不可变;

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/凡人多烦事01/article/detail/63373
推荐阅读
相关标签
  

闽ICP备14008679号