数据传递的几种方式
情况一：父传子(孙)
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>
}
}
父传子
- 把父组件的 属性 或 状态 信息作为 属性 传递给子组件（单向数据流）
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>
}
}
- 把要传递的数据挂载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>
}
}
子传父
- 子组件调用父组件上的方法
- 把父组件中的一个方法，作为属性传递给子组件
- 在子组件中，把基于属性传递进来的方法执行（相当于在执行 父组件中的方法）
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传递
- 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
}
}
兄弟组件数据传递
- 找共同的父组件，子组件A传给父组件，父组件传给子组件B
- 在共同的父组件上设置context
- 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)
