react学习笔记（2）--react组件的数据和组件交互

　　react的组件所有的数据操作都是围绕着props和state这两个属性进行的，它们的区别在于：

           state：只属于当前组件的所有数据，它是一个对象。定义方式是在当前组件的constructor中定义，this.state={}，在定义之前一定要先super()继承从父组件或React.Component。

         props:这个属性表示从父组件继承而来的属性，它是不可冻结对象(freeze对象)，不可写，不可修改值，只能读，在子组件中可以直接通过this.props来获取，如果在构造函数中需要使用props。则需要使用super(props)来继承。

        在单个组件中，修改state的方式只有一个就是使用this.setState。例如,this.setState({data1:xxx,data2:xxx})，而且react的setState是优化过得。所以每次提交的如果不是整个state，也能做到只修改提交的state数据。可以在两个不同的函数或者钩子里面提交不同的数据，比如this.setState({data1:xxx}),this.setState({data2:xxx})。

       父子组件之间的数据修改通常是在子组件里调用父组件的方法。然后放入准备要传給父元素的数据。在项目中通常是这样：

    

  父组件;
  class ParentComponent extends Component{
   constructor(){
     super();
    //把事件的作用域绑定到当前组件上
     this.getChildParentHandle=this.getChildParentHandle.bind(this);
   }
    getChildParentHandle(childData){
       //这里就获取到了子组件传出来的数据。可以做一些处理
       console.log(childData)
    }
    render(){
      //传給子组件的就是parentgetChildData方法
       return <ChildComponent parentgetChildData={this.getChildParentHandle} />
    } 
 }
  
 子组件：
 class ChildComponent extends Component{
      constructor(){
         super();
      }
      componentDidMount(){
        //调用父组件的方法并放入要传出去的值
         this.props.parentgetChildData(childData);
     }
     render(){
        return <div></div>
     }
  }

兄弟组件之间传值也可以用这种方式，子组件A传给父组件，父组件通过属性传给组件b，当然，最好的方式是将数据保存在一个外部对象中，比如一个全局对象或者redux中，这样，组件与组件之间的耦合也会更低。