笔记05浅谈react中的state和props区别

发表于

浅谈react中的state和props区别

1、首先props是组件对外的接口，可以进行组件之间的数据传递。组件内部渲染的时候，定义组件阶段，可以使用prop来设置属性值；渲染组件阶段再给props赋值，从而给组件标签赋值。
如：

class Component extends React.Component{
        constructor(props){
            super(props)
            this.state={}
        } 
        render(){
            return (
               <标签内>{this.props.name}</标签内>
                  //prop可以用于组件自身设置属性
                  )
                }
              }
 ReactDOM.render(  <Component name="zhangsan" />,  
  //渲染具备标签属性的组件
 document.getElementById('example2') )

2、在引入了prop库之后，可以使用propTypes对组件进行属性必要性的限制。

Component.propType={
    name:PropTypes.string.isRequired
}

3、可以使用组件名.defaultProps为props添加默认值

Component.defaultProps={name:"张三",age:18}

4、父组件给子组件传递数据，可以使用父组件的state来让子组件用props接收，
这个时候子组件的props是只读的，想要改变props的值必须由this.setState来修改父组件的state
   代码如下：

       class APP extends React.Component{
           constructor(props){
            super(props)
            this.state={}
           }
         render(
             return(
                 <div>
               <child1 传递的属性={this.state.属性名}/>
               <child2 传递的属性={this.state.属性名}/>
                 </div>
                 )
               )
       }
    子组件的接收属性和渲染过程(用props来将传来的数据渲染)：
         class child1 extends React.Component{
             render(
                 return(
                  <div>{this.props.属性}</div>
                     )
             )
         }

5、state和props的区别：

      state和props首先都可以用来承载组件要显示的数据。
      state：是组件内部用来标识组件内部数据的状态的数据；
             可以使用this.setState来修改数据状态。
      props：一般是写标签的时候由外部传入到组件内部的数据；
             组件内部可以使用props这个接口来进行数据传递；
             并且可以通过props来接收父组件传递下来的数据。
             并且注意这种情况下，props是只读的，即修改传递
             的值只能通过修改父组件的state来达成值的修改。