React组件之间通讯

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/arvin_top/article/details/85641340

父子之间通讯

父子之间通讯又分为父->子，子->父。

因为react单向数据流向的缘故，父->子通信的话直接通过props。父组件数据变动，直接传递给子组件。

子->父组件之间就要通过回调函数来通信了，父组件传递一个回调函数给子组件，子组件通过调用此函数的方式通知父组件通信。

跨级组件通信

react为了实现祖先组件和后辈组件之间的通信问题，引入了contextApi。

class Button extends React.Component {
  render() {
    return (
      <button style={{background: this.context.color}}>
        {this.props.children}
      </button>
    );
  }
}
Button.contextTypes = {
  color: React.PropTypes.string
};
class Message extends React.Component {
  render() {
    return (
      <div>
        {this.props.text} <Button>Delete</Button>
      </div>
    );
  }
}
class MessageList extends React.Component {
  getChildContext() {
    return {color: "purple"};
  }
  render() {
    const children = this.props.messages.map((message) =>
      <Message text={message.text} />
    );
    return <div>{children}</div>;
  }
}
MessageList.childContextTypes = {
  color: React.PropTypes.string
};

MessageList中的color会自动更新到儿孙组件里面去，实现跨级啊通信。如果需要反过来通信，则需要借助其他工具，比如事件系统(Pub/Sub)。

没有嵌套关系组件之间通信

组件之间通信最主流的两种方式脱胎于观察这模式和中介者模式这两种。

跨级之间通信现在最主流的方式就是观察这模式的实现Pub/Sub，react社区中的redux也是使用这种方式实现的。

vue2.X版本也去掉了跨组件通信的功能。那如何在2.x中做跨组件通信呢？如果不借助外力的话，是不是可以使用$parent和$childen的递归调用实现全局组件通信呢？比如我想广播一个事件，我就查找到所有的子组件，挨个触发$emit(xx)，上报一个事件也是同理，只不过需要查找所有的$parent。结合起来就可以实现组件之间的通信，只不过这种查找效率比较低，需要慎用和优化