react基础（7）—— 简单通信

 

#########################################

命运这种东西，生来就是要被踏于足下的，如果你还未有力量反抗它，只需怀着勇气等待。

#########################################

1. 父传子 - 属性通信
2. 子传父 - 回调函数通信
3. 简单兄弟通信 - 中间人通信

4. 复杂通信 -
(1) react 自己带 context 通信方式
(2) flux
redux 解决方案
react-redux

 

// vue props down, events up
// react props down, callback up

------------------------------------父传子--------------------------------------

在父组件中给子组件定义一个属性，这个属性等于父组件的状态，

在子组件中通过this.props.父组件属性，来读取这个状态，

父组件中的状态更改的时候，子组件自动更改（单项数据流），

应用：二级菜单，点击一级的时候，数据自动流向二级中的结构中，这样点击任何一个一级菜单，看到的二级菜单的内容都是不一样的。

import React,{Component} from "react";

class Child extends Component{
    render(){
        return <div>
            child-----{this.props.kname}
        </div>
    }
}

class App extends Component{

    constructor(props) {
      super(props);
    
      this.state = {
          name:"父组件中定义的名字"
      };
    }

    render(){
        return <div>
            hello
            <Child kname={this.state.name}/>

            <button onClick = {()=>{
                this.setState({
                    name:"父组件中定义的名字111111"
                })
            }}>click</button>
        </div>
    }
}

//单向数据流

export default App;

 

-------------------------------------------子传父----------------------------------

在父组件中定义一个属性等于一个回调函数，回调函数的参数就是子组件传过来的，然后通过this.setState赋值，然后显示

子组件中通过 this.props.父组件属性（参数），来触发父组件中的回调函数，

import React,{Component} from "react";

class Child extends Component{

    constructor(props) {
      super(props);
    
      this.state = {
          name:"child组件中定义的名字"
      };
    }

    render(){
        return <div>
            child
            <button onClick={()=>{
                //把状态传给父组件
                //回调函数
                console.log(this.props.myevent);
                this.props.myevent(this.state.name);//执行传来的回调函数，如果没有放在回调函数中，会有内存max问题
            }}>child click</button>
        </div>
    }
}

class App extends Component{
    constructor(props) {
      super(props);
    
      this.state = {
          mytext:""
      };
    }

    render(){
        return <div>
            hello----{this.state.mytext}

            <Child myevent={(data)=>{
                //这个函数等着被触发
                console.log("定义在父组件的方法",data)

                this.setState({
                    mytext:data
                })
            }}/>
        </div>
    }
}

export default App;