React中的组件通信

React中组件通信一共分为三种形式：

1. 父子通信
2. 子父通信
3. 跨组件通信

父子通信

概念:父组件定义一个数据传递给子组件,但是这个数据只有父组件有权利修改,子组件不可以。

父组件中定义数据

  constructor () {

    super()

    this.state = {
      name: '小哥哥'
    }

  }

传递给子组件:

  render () {
    let { name } = this.state 
    return (
      <Fragment>
        <h3> father组件 </h3>
        <Son name = { name }></Son>
      </Fragment>
    )
  }

子组件接收数据:

class Son extends Component {
  render () {
    let { name } = this.props 
    return (
      <Fragment>
        <h4> son组件 </h4>
        <p> 父亲给我起了个名字： { name } </p>
      </Fragment>
    )
  }
}

这样就完成了简单的父子通信,前面说了父组件是可以修改数据的,所以可以在父组件同定义和触发方法修改数据

父组件中定义方法:

  nameChange = () => {
    this.setState({
      name: '哥哥小'
    })
  }

父组件中触发方法:

  render () {
    let { name } = this.state 
    return (
      <Fragment>
        <h3> father组件 </h3>
        <button onClick = { this.nameChange }> 改名字 </button>
        <Son name = { name }></Son>
      </Fragment>
    )
  }

子父通信

子父通信就是在子组件中修改父组件的东西

父组件中定义数据和方法:

  constructor () {
    super()
    this.state = {
      name: '小哥哥'
    }
  }
  nameChange = () => {
    this.setState({
      name: '哥小小'
    })
  }

父组件将数据和方法传递给子组件:

  render () {
    let { name } = this.state 
    return (
      <Fragment>
        <h3> father组件 </h3>
        <Son name = { name } nameChange = { this.nameChange  }></Son>
      </Fragment>
    )
  }

子组件调用父组件的方法来修改父组件的数据:

  render () {
    let { name,nameChange } = this.props 
    return (
      <Fragment>
        <h4> son组件 </h4>
        <button onClick = { nameChange }> 改名字 </button>

        <p> 父亲给我起了个名字： { name } </p>
      </Fragment>
    )

  }

上面是简单的子父通信,后面可以通过ref链来完成子父通信

子组件中定义数据:

class Son extends Component {

    constructor() {
        super()
        this.state={
            name : '陈小龙'
        }
    }
    render () {
        let { name } = this.state
        return (
            <Fragment>
               <h4>Son组件</h4>
               <p>父亲给我起了名字:-----{ name }</p>
            </Fragment>
        )
    }
}

父组件中有两种书写方法:

方法1:

class Father extends Component {
    changeName=()=>{
        console.log( this )
        this.refs.son.setState({//方法1
        name : '凌从君'
        })
    }
    render () {
        return (
            <Fragment>
                <h3>Father组件</h3>
                <button onClick={ this.changeName }>给儿子改名</button>
             <Son ref="son"></Son>//方法1
            </Fragment>
        )
    }
}

方法2:

class Father extends Component {
    changeName=()=>{
        console.log( this )
        //this.refs.son.setState({//方法1
        //name : '凌从君'
        //})
        this.son.setState({
            name : '凌从君'
        })
    }
    render () {
        return (
            <Fragment>
                <h3>Father组件</h3>
                <button onClick={ this.changeName }>给儿子改名</button>
              {/* <Son ref="son"></Son>//方法1 */}
              <Son ref={ el => this.son = el }></Son>
            </Fragment>
        )
    }
}

跨组件通信(context)

什么是跨组件通信?

例如:爷爷要给100块钱给孙子,不经过爸爸,这种行为叫做跨组件通信

原先的跨组件传递要一级一级的传递数据，这种形式很是低效，context的出现解决了这个低效的方案

实例:爷爷要给孙子取名字

import React,{Component,Fragment} from 'react'

const NameContext = React.createContext("陈小龙")  //步骤1

class GrandFather extends Component{
    render () {
        return (
            <Fragment>
                <h2>GrandFather组件</h2>
                <Father></Father>
            </Fragment>
        )
    }
}

class Father extends Component {
    render () {  
        return (
            <Fragment>
                <NameContext.Provider value="陈小龙"> //步骤2
                    <h3>Father组件</h3>
                    <Son></Son>
                </NameContext.Provider>
            </Fragment>
        )
    }
}

class Son extends Component {
    static contextType = NameContext //步骤3
    render () {       
        return ( 
            <Fragment>
                <h4>Son组件</h4>
                <p>我是儿子---爷爷给我取了个名叫:{ this.context }</p>  //步骤4,this.context这个名固定的不可更改
            </Fragment>
        )
    }
}

export default GrandFather

这样,’陈小龙’这个名字就给孙子取好了