react系列（三）组件间通讯

组件间通讯

React的基本组件元素是一个个组件，组件之间可能存在关联、组合等关系。不一样的组件之间，常常会发生数据传递或者交换，咱们称之为组件间通讯。
根据传递的复杂程度，能够分为三种状况：
父子间通讯，兄弟间通讯，同其余外部库通讯。

父子间通讯

在学习组件的时候，props是输入，组件是输出。在这里的props，就是父向子传递的数据。而子向父传递数据，则是经过父级传递进来的props中的函数引用，间接的唤起父级处理函数，并传入参数。

/* 父组件 */
export default class NameInput extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "default"
    };
    this.handleSubChange = this.handleSubChange.bind(this);
  }
  handleSubChange(newValue) {
    this.setState({ value: newValue });
  }
  render() {
    return (
      <div>
        <div>{this.state.value}</div>
        <Sub sub="sub1" subClick={this.handleSubChange} />
      </div>
    );
  }
}

/* 子组件 */
export default class NameInput extends Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange() {
    this.props.subClick("new sub");
  }
  render() {
    return <div onClick={this.handleChange}>{this.props.sub}</div>;
  }
}

在这个例子里，经过调用props上传递进来的处理函数，达到了子向父传递数据的目的。

兄弟间通讯

不使用其余库的话，借助React原生API，有两种方法：

1. 经过父组件作中转
2. 借用父组件之外，也可使用react的Context API

关于Context API，咱们仍是先翻文档Context。
Context主要是为了处理多个组件可能须要获取同一组数据，例如文档中提到的theme，以及B端系统常常须要获取全局登陆态，均可以使用ContextAPI。
在Context中，有两个重要的概念，Provider和Consumer。
Provider提供一个全局的数据源，订阅了它的数据源的Cusumer，不论节点嵌套多深均可以获取到Provider提供的数据。
看一个例子。
点我-CodeSandbox
在一些轻量级的应用中，基本上可使用ContextAPI解决多级数据共享的问题。固然，若是要更强大，只能用Redux等库了。
关于Redux的使用，会在下一篇详细讲解。

同其余外部库通讯

若是一个项目中，既有React，又有jQuery，又有Vue怎么办？怎么解决这种情形下得数据流转？
这是阿里的一道面试题，我那时没有怎么写过React，基本上就是zepto和小程序，面试官没有为难我，提了这样的问题。当时我提出了一种想法，发布订阅加适配器模式。下面简单说一下个人想法。
若是把这个场景抽象一下，能够看作是三种不一样的组件须要相互通讯，它们对数据的要求不同，数据格式不一样，可是一旦数据打到各自的组件内，其实数据流就不须要咱们关心了。
因此能够维护一个公共的数据集市，全部人都从数据集市里取数据，也向数据集市中发数据，数据集市是一个公开的发布者，各组件为订阅者。
数据集市承担了适配的工做，对各个组件传进来的数据统一保存，在取数据时，根据组件的类型不一样，派发不一样形式的组件，这样，基本上就将组件间通讯提高至了一个统一的数据集市，避免了组件的之间一对一通讯。
固然，这和flux的思想也很相似，统一数据源，统一分发，只和数据源交互，避免了多个组件间复杂通信带来的数据流混乱。
无论怎么样，在前端应用愈来愈复杂的今天，数据流的流向问题是绕不开，不管是单向数据流，仍是多Model多数据流，都是适配当前场景下的解决方案，之后可能会有新的解决方案。
可是目前，在React体系中，Redux是绕不开的。下一篇，说一下flux和Redux。