React的组件通信方式

React的组件通信方式

1、父子组件通信

实现途径：通过属性绑定的形式（在父组件的模板中子组件的标签上，自定义属性，子组件通过props来接收）

这里由于render(){ }函数是触发两次(初始化渲染时一次，数据修改渲染时再一次)，所以，如果是发送请求得到数据，这里要先判断这个数据有没有，用短路逻辑，如果有，再渲染，如果第一次没有，比如就定义了这个状态数据，而值为null，渲染就会报错。

父组件传递子组件

1、自己模拟的数据时：直接使用即可

2、数据交互得到的数据：会导致组件至少渲染两次，一定要记得做判断

2、子父组件通信

实现途径：也是以属性绑定的形式实现

以子组件给2000红包给父组件为例：首先，在父组件里面定义一个constructor状态数据，父组件里面再定义一个方法add(箭头函数)，setState()来修改这个数据，在父组件的模板里面，子组件的身上以属性的形式绑定这个方法，那么子组件的props上就有这个方法，然后子组件可以onClick = {()=>{this.props.add(2000)}}，这里因为子组件触发这个方法时要传参，所以里面是箭头函数的形式。当然，这里的2000也可以写成子组件自己的状态数据，那么就是onClick={()=>{this.props.add(this.state.money)}}。

3、非父子组件通信（以姐姐揍弟弟为例）

实现途径：son组件通过ref绑定在父组件身上，子父组件通信，再父子组件通信实现

首先，弟弟要哭，自己的状态数据自己修改，通过一个开关控制son组件的哭的显示与否，里面有一个函数就是来改变这个开关的值的；然后，son和girl组件都是在父组件的模板里面的，在父组件的son上通过ref={el=>this.son=el}，这样子组件上可以用来改变开关值的函数就在父组件身上了，父组件可以通过this.son来访问（在render函数里面还取不到，在componentDidMount里面可以取到，然后在这个钩子里面可以将这个方法通过this.setState()函数绑定在构造器状态数据里面，之后在状态数据里面调取就可以了）；再然后，父组件自己可以定义一个箭头函数方法来触发son组件身上用来改变开关的值的方法，通过属性绑定的方式将父组件身上这个方法绑定在girl组件上，那么girl组件就可以通过props来访问这个方法了。也就是最后由girl来触发这个son身上的哭方法了。

4、跨组件通信

实现途径：利用context，是16版本才有的

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

// 1. 创建context (上下文【 投影 】)

const MoneyContext = createContext()

class GrandFather extends Component {

  constructor(props) {
    super(props)
    this.state = {
       money: 100000
    }
  }
  
  render () {
    return (
      <div>
        <h3> GrandFather  </h3>
        <MoneyContext.Provider value = { this.state.money }> {/*这里必须用value属性绑定*/}  
          <Father/>
        </MoneyContext.Provider>
      </div>
    )
  }
}

class Father extends Component {
  render () {
    return (
      <div>
        <h3> Father  </h3>
        <Son/>
      </div>
    )
  }
}

class Son extends Component {

  static contextType = MoneyContext  {/*静态关键字static*/}

  render () {
    console.log( this )
    return (
      <div>
        <h3> son  </h3>
        <p> { this.context } </p>  {/*context直接就是这个数据*/}
      </div>
    )
  }
  
}

export default GrandFather

5、多组件状态共享

Flux

redux

mobx(阿里)