react 组件通信

概述

react中的组件通信问题，根据层级关系总共有四种类型的组件通信：父子组件、爷孙组件、兄弟组件和任意组件。前三种是任意组件的范畴，所以说，第四种是一种通用的方法。下面逐一介绍各个方法的实现方式：

1、父子组件通信

父子组件通信分为父类组件向子类组件通信、子类组件向父类组件通信两种情况：

1.1父组件向子组件传值

（1）通过属性传值的方式实现:

之所以可以这样实现，是因为react在状态更新时，会自动更新子组件。
第一步：在父类组件中初始化属性及引入子组件

 // 初始化
        <AddSpecialEvent
          visible={visible}
          eventDate={this.state.dateParam}
          handleCancel={this.handleCancel}
          handleOk={this.handleOk} />

第二步：在子类组件中引用父组件传递的属性值

 const { visible } = this.props;

这种方法优点是实现起来比较简单，缺点是必须在初始化时传入，并且不可以撤回，且只能传入一个函数。

（2）通过react生命周期函数实现

react生命周期componentWillReceiveProps可以实现父子组件之间的通信，但是该生命周期函数会在父子组件之间状态改变时触发，不利于性能的提升，最好能够通过判断当前的this.props及nestProps中的某一个属性是否相同，在进行更新子组件。

实现方法如下：在子类组件中调用生命周期函数

  componentWillReceiveProps = (nextProps) => {
    if(nextProps.checkedList === this.props.checkedList) {
      this.setState({
        checkList: nextProps.checkedList
      })
    }
  }

这种方法借助react生命周期来实现，实现起来虽然容易，但是不建议使用，不利于性能的提升。而且在父、子组件之间的状态改变时，不易控制。

1.2子类组件向父类组件传值通信

（1）父类组件初始化子类组件时作为属性传入回调函数

第一步：初始化回调函数handleCancel和handleOk

        <SelectArea
          modalVisible={modalVisible}
          handleCancel={this.handleModalCancel}
          handleOk={this.handleModalOk}
          areaList={areaList}
          checkedList={checkedList}

第二步：子组件传值

  // 确定
  handleModalOk = () => {
    let {checkList} = this.state
    this.props.handleModalOk(checkList)
  }

（2）通过部署消息接口的方式实现子组件向父类组件传值

首先需要一个可以发布和订阅消息的基类，子组件继承消息基类，就有了发布消息的能力，然后父类组件去订阅子组件的消息，即可实现子组件向父组件的传值。这种方法实现起来较为复杂，适合子组件向父组件传值比较频繁的需求。在这里不在赘述。

2、爷孙组件通信

上面的例子我们了解到了父子组件之间的通信问题，根据递归思想，很容易相处爷孙组件之间的通信方式，就是通过层层传递属性的方式实现。即把爷孙组件，分解成多个父子组件通信的问题。层层传递的有点是非常的简单，但是会浪费很多的代码，非常的繁琐，中间作为桥梁的组件会引入较多不属于自己的属性代码。
在react中，通过context可以让祖先组件直接把属性传递给后代组件。可以跨越任何层次向后代传递消息。组件通信之前，需要双向声明，也就是在祖先组件中声明要传递的属性，并在后代组件中再次声明，然后在祖先组件中引入要传递的属性，就可以在后代组件中使用从父类组件中传递的属性了。

import PropTypes from 'prop-types';

class Child extends Component {
// 后代组件声明需要读取context上的数据
  static contextTypes= {
    text: PropTypes.string 
  }

  render () {
    //  通过this.context读取context上的数据
    return <div>{this.context.text}</div>
  }
}

clsss Ancestor  extents Component {
  // 祖先组件声明需要在context上放入的数据 
  static childContextTypes = {
    text: PropTypes.string
  }
  // 祖先组件在context上放入数据
  getChildContext = () => {
    return { text: '搬砖笔记' }
  }
}

context的优点是省去了层层传递的麻烦，并且通过双向声明控制了数据的可见性，当层次较多时，这是一种值得采用的方案；但缺点是很明显的，就像全局变量一样，如果不加以节制很容易造成混乱，而且也容易出现重名覆盖的问题。

个人建议是对所有组件共享的一些制度信息可以采用context来传递，比如登录用户的信息等。React Router路由就是通过context来传递路由属性的。

3、兄弟组件通信

如果两个组件时兄弟关系，那么可以将父组件作为桥梁来说来实现两个组件之间的通信，这其实是一种主模块模式。在下面的例子中实现了两个兄弟组件通过父类组件通信的功能。

class Father extends Component{
  constructor(props){
    super(props)
    this.state = {
      child2bgcolor:'pink'
    }
  }
  onchild2bgChange(color){
    this.setState({
      child2bgcolor:color
    })
  }
  render(props){
    <div>
      <Children1 changeChild2Color={(color)=>{this.onchild2bgChange(color)}} />
      <Children2 bgcolor={this.state.child2bgcolor} />
    </div>
  }
}