[React Native]组件之间通信

本文是一篇译文，英文好的同学可以阅读这里。

两个React组件之间如何通信？这是一个很好的问题，有很多种答案。这个取决于组件之间的关系，还有，取决于你更喜欢用哪种方式。

我在这里讲的不是使用数据存储方式在组件之间通信，我真的只是仅仅在谈如何在组件之间通信。

组件之间有三种可能的关系：#####

-> 表示谁向谁发送消息，例如A->B表示A发送消息给B

• 主->从（父->子）
• 从->主（子->父）
• 两者之间没有任何关联

父-子之间的通信方式：###

这个是一种最简单的情况，在React中很自然的一种使用方式并且你正在使用。
你有一个组件A需要和组件B通信，并且给它传递一些属性props。

var MyContainer = React.createClass({
    getInitialState: function() {
        return { checked: true };
    },
    render: function() {
        return  <ToggleButton text="Toggle me" checked={this.state.checked}/>;
    }
});
var ToggleButton = React.createClass({
    render: function() {
        return <label>{this.props.text}: <input type="checkbox" checked={this.props.checked} /></label>;
    }
});

这里<MyContainer> 的render方法生成一个<ToggleButton>，传递一个checked属性。这就是简单的通信。

你只需要给父组件正在rendering的子组件传递一个属性prop就可以了进行通信了。

顺便提一下，在这里例子中，注意一下点击checkbox 是没有效果的。

<ToggleButton>有一个<MyContainer>传递给它的属性checked，但它是没法改变这个属性的（属性checked是不可修改的）。

子-父之间的通信方式：###

现在，让我们来讨论下<ToggleButton>控制自己的状态并且想告诉父组件<MyContainer>我被点击了，通知父组件展示一些东西。所以，我们添加一个初始化状态和一个<ToggleButton>点击的事件：

var ToggleButton = React.createClass({
  getInitialState: function() {
    return { checked: true };
  },
  onTextChanged: function() {
    console.log(this.state.checked); // it is ALWAYS true
  },
  render: function() {
    return <label>{this.props.text}: <input type="checkbox" checked={this.state.checked} onChange={this.onTextChanged}/></label>;
  }
});

注意一下我在onTextChanged方法中没有改变属性checked的值，它的值一致都是true。因为checkbox只会通知你它的状态改变了，但是不会告诉你它现在是选中还是没有选中。

所以我们在下面这个方法中增加了一行状态改变的代码，和一个待实现的通知父组件<MyContainer>的代码

 onTextChanged: function() {
    this.setState({ checked: !this.state.checked });
    // callbackParent(); // ??
 },

要拿到一个指向父组件的回调对象，我们准备使用在第一种关系父-子之间的通信方式中用到的通信方式。父组件<MyContainer>会通过prop传递一个回调给子组件<ToggleButton>：其实我们可以传递任何对象（属性、方法），他们不是DOM属性，他们只是简单的Javascript对象。

下面是一个例子，演示子组件<ToggleButton>如何通知父组件<MyContainer>它的状态发生了变化。父组件收到这个“变化事件”并且也改变它自己的状态来显示收到的变化：

var MyContainer = React.createClass({
    getInitialState: function() {
        return { checked: false };
    },
    onChildChanged: function(newState) {
        this.setState({ checked: newState });
    },
    render: function() {
        return  <div>
            <div>Are you checked ? {this.state.checked ? 'yes' : 'no'}</div>
            <ToggleButton text="Toggle me" initialChecked={this.state.checked} callbackParent={this.onChildChanged} />
          </div>;
    }
});
var ToggleButton = React.createClass({
    getInitialState: function() {
    // we ONLY set the initial state from the props
    return { checked: this.props.initialChecked };
  },
  onTextChanged: function() {
    var newState = !this.state.checked;
    this.setState({ checked: newState });
    this.props.callbackParent(newState); // hey parent, I've changed!
  },
  render: function() {
    return <label>{this.props.text}: <input type="checkbox" checked={this.state.checked} onChange={this.onTextChanged}/></label>;
  }
});

这里是最终的效果：

图1

当我点击选择框，父组件收到事件，页面显示为’yes‘.

以上的两种关系都存在一个问题，如果父-子组件之间有好几层其他的组件，那么我们就需要通过props一层层的传递我们的属性和方法，这将是一个灾难性的场景。

没有任何关系的组件之间通信方式：###

如果你的组件之间没有任何关联（或者有关联但是两者之间的隔着很多的组件并且你不想通过“中间的组件”去传递属性和方法），那么唯一的方式就是通过某些“事件”，一个组件去订阅这个事件，另外一个组件去触发这个事件。这是任何事件驱动的系统中最基本的两种操作：订阅或者监听一个事件，发送/触发/发布/调度这个事件去通知哪些订阅者。

下面介绍三种模式来处理事件，你可以点击这里比较它们。

• Event Emitter/Target/Dispatcher :
  需要从EventEmitter/EventTarget/EventDispatcher继承或者实现合适的接口

  myObject.addEventListener('myCustomEventTypeString', handler);
  myObject.dispatchEvent(new Event('myCustomEventTypeString'));
  myObject.removeEventListener('myCustomEventTypeString', handler);
  

一个非常简单的EventEmitter，如果没有过多的要求，它可以简单的这么写：

  // 继承EventEmitter 去使用 this.subscribe 和 this.dispatch 这两个方法
  var EventEmitter = {
    _events: {},
    dispatch: function (event, data) {
        if (!this._events[event]) return; // no one is listening to this event
        for (var i = 0; i < this._events[event].length; i++)
            this._events[event][i](data);
    },
    subscribe: function (event, callback) {
      if (!this._events[event]) this._events[event] = []; // new event
      this._events[event].push(callback);
   }
  }
  otherObject.subscribe('namechanged', function(data) { alert(data.name); });
  this.dispatch('namechanged', { name: 'John' });

这是一个非常简单的EventEmitter ，但是它可以完成我们的需求。

当然你也可以使用Node.js中的EventEmitter，如果有不清楚的同学，请移步这里

• Signals：
  与Event Emitter/Target/Dispatcher 相比，不需要指定事件的“名称”，可以避免硬编码带来的问题

  myObject.myCustomEventType.add(handler);
  myObject.myCustomEventType.dispatch(param1, param2, ...); 
  myObject.myCustomEventType.remove(handler);
  

React 团队使用的是： js-signals 它基于 Signals 模式，用起来相当不错。

这里简单介绍下使用方式
第一步：命令行切换到你的项目目录，执行

  npm install signals

第二步：引入模块

  const signals= require('signals');

第三步：使用方式

  //custom object that dispatch a `started` signal
  var myObject = {
    started : new signals.Signal()
  };
  function onStarted(param1, param2){
    alert(param1 + param2);
  }
  myObject.started.add(onStarted); //add listener
  myObject.started.dispatch('foo', 'bar'); //dispatch signal passing custom parameters
  myObject.started.remove(onStarted); //remove a single listener

• Publish / Subscribe : 类似于很多语言中的事件总线EventBus广播的方式，相比EventEmitter，优点是组件之间可以完全独立，没有任何关联。React中比较常用的是库是PubSubJS，关于这个库的详细使用请查看官方的说明

  这里简单介绍下使用方式

  第一步：命令行切换到你的项目目录，执行

  npm install pubsub-js
  

  第二步：引入模块

  const PubSub = require('pubsub-js');
  

  第三步：订阅事件

   // create a function to subscribe to topics
  var mySubscriber = function( msg, data ){ 
    console.log( msg, data );
  };
  // add the function to the list of subscribers for a particular topic
  // we're keeping the returned token, in order to be able to unsubscribe
  // from the topic later on
  var token = PubSub.subscribe( 'MY TOPIC', mySubscriber );
  

  第四步：发布事件

  // 异步发布事件，非阻塞，无需等待订阅者处理结束
  PubSub.publish( 'MY TOPIC', 'hello world!' );
  // 同步发布事件，阻塞，需要等待订阅者处理结束
  PubSub.publishSync( 'MY TOPIC', 'hello world!' );