react组件中的数据传递(通过context传递方式被废弃，未

数据传递的几种方式

情况一：父传子(孙)
 1.通过props：把父组件的props或者state当做子组件的属性传递给子组件
 2.通过context：把父组件中需要传递的数据放到context中，子组件再通过context获取数据
 区别：通过prop传递只能父组件传递给子组件，但是通过context能够将父组件中的数据传递给所有的子子孙孙的后代组件中

情况二：子传父（数据一般是通过修改state，因为props是不可变的）
  1.通过子组件执行父组件中的函数：父组件中定义一个函数，并把函数当做属性传递给子组件，子组件通过执行父组件传递过来的函数，把数据传递给父组件（类似于jsonp原理）。
  2.通过context：父组件将一个函数放到context属性中，子组件拿到context中的函数，并执行，把要传递的数据放到函数中。
  区别:通过函数作为属性的方式只能由子组件传递给父组件，但是使用context传递能够跨组件，子子孙孙的组件都可以修改存放context的父组件

情况三：兄弟组件传递
  1.就是利用上边的父子组件的传递，子组件A子传给父组件，父组件传递给子组件B。
  2.就是利用父组件上定义context属性，所有的子组件可以拿到context来通过context来实现数据的传递
区别：第一种只能传递兄弟组件之间的数据，第二种只要父组件中定义context，就可以传递所有子组件之间的数据
相同点就是，必须都需要有相关联的一个父组件才行

情况四：不相干组件数据传递
  以上的传递方式用于复杂情况下数据传递都是非常繁琐的。所以出现了redux

复合组件（组件的嵌套）

class A extends React.Component{
  render(){
    return <div>A组件</div>
  }
}
class B extends React.Component{
  render(){
    return <div>B组件 <A> </div>
  }
}

父传子

1. 把父组件的 属性 或 状态 信息作为 属性 传递给子组件（单向数据流）

class Parent extends React.Component{
  constructor(){
    super();
    this.state={
      num:1
    }
  }
  render(){
    //父组件把想要传递的数据挂在子组件的属性上
    return <div>父组件 <Child aa={this.state.num}></Child> </div>
  }
}
class Child  extends React.Component{
 constructor(){
    super();
  }
  render(){
    //子组件通过属性this.props获取父组件传递的内容
    return <div>子组件{this.props.aa}</div>
  }
}

2. 把要传递的数据挂载context上，通过context来传递数据（可实现父传子子孙孙）

import PropTypes from 'prop-types'//必须引入PropTypes 
class Parent extends React.Component{
  constructor(props,context){
    super(props,context);
    this.state={//设置state
      A:'aa'
    }
  }
  static defaultProps={//设置state
      A:'aa'
  }
  static childContextTypes = {//设置childContext的type
    propA: PropTypes.string,
    stateA: PropTypes.string
  }
  getChildContext () {//将数据挂载到Context上
    return {
      propA: this.props.A,
      stateA: this.state.A
    }
  }
  render(){
    return <div>父组件 <Child></Child> </div>
  }
}
class Child{
  
  static contextTypes = {//验证context
    propA: PropTypes.string,
    stateA:PropTypes.string
  }
  render(){
    let {propA,stateA}=this.context;//获取context中存放的数据
    return <div>{propA}-{stateA}<div>
  }
}

子传父

• 子组件调用父组件上的方法
  1. 把父组件中的一个方法，作为属性传递给子组件
  2. 在子组件中，把基于属性传递进来的方法执行（相当于在执行 父组件中的方法）

class Parent extends React.Component{
  constructor(){
    super();
    this.state={
      num:1
    }
  }
  changeData=(data)=>{//使用箭头函数，方便this
    this.setState({
      num:data
    })
  }
  render(){
    //把父组件中的一个方法，作为属性传递给子组件
    return <div>父组件{this.state.num} <Child change={this.changeData}></Child> </div>
  }
}
class Child  extends React.Component{
 constructor(){
    super();
  }
  sendParent(){
    this.props.change(10)
  }
  render(){
    //把基于属性传递进来的方法执行（相当于在执行 父组件中的方法）
    return <div onClick={this.sendParent}>子组件</div>
  }
}

• 通过context传递
  1. context上挂载父组件的方法
     2.子组件执行context上挂载的方法

class Parent extends React.Component{
  constructor(){
      super();
      this.state={
        num:10
      }
  }
  static childContextTypes={
    changeData:PropTypes.func
  }
  getChildContext(){
    return {
      changeData:this.fn
    }    
  }
  render(){
    return <div><Child></Child></div>
  }
  fn=(n)=>{
    this.setState({
      {
      num:this.state.num+=n
      }
    })
  }
}
class Child extends React.Component{
  static contextTypes = {//验证context
    changeData: PropTypes.func,
  }
  render(){
    return <div onclick={this.handle}></div>
  }
  handle=()=>{
    this.context.changeData(10)//执行父组件上的方法并传入的10
  }
}

兄弟组件数据传递

1. 找共同的父组件，子组件A传给父组件，父组件传给子组件B
2. 在共同的父组件上设置context
3. redux处理组件之间信息的传递
   //相当于vue中的vuex

对比vue的数据传递

//父传子    
父组件传递   :parentMsg="message";
子组件接收    props:parentMsg,

//子传父 
子组件发射this.emit('updata',data)
父组件绑定 @updata=function(data){console.log(data)}

//sync语法糖实现数据双向传递
父组件    :parentMsg.sync="parentData"
子组件    接收数据  props:['parentMsg']    更新数据 this.$emit('update:parentMsg', newData)