【React Native】页面外更新组件状态

在 React Native 中，我们经常会有这样的需求，A 页面进入 B 页面，再在 B 页面中，希望触发 A 页面的一些操作，或者用其他API 获取的数据来刷新 A 页面数据，但 API 调用操作又不在 A 页面中，并且需要监听。下面我们分几种具体情况来说明如何操作：

---

B 页面中触发 A 页面的函数 【跳转传递函数】

使用场景：如果我们 A 页面中一个组件使用了某个变量，比如 text，而进入 B 页面之后，B 页面改变了一个数据，需要赋值给 A 页面中的 text。此种情况可以这样操作：

（注：路由跳转均使用 React Navigation 进行，其他库的处理暂不了解）

如果 A 页面中是这样使用：

 <Text>{this.state.text}</Text>

那我们可以在 A 页面中添加一个函数

  changeAText = (newText) => {
    this.setState({text: newText})
  }

从 A 页面跳转 B 页面的时候，带上一个参数，参数是一个函数，就是上面的 changAText 函数。

this.props.navigation.navigate('PageB', {textFunction: this.changeAText})

接下来，我们需要在 B 页面中修改 A 页面的 text 的值的时候，就可以获取到navigation中的函数参数 textFunction，并调用了:

B页面中：

  const {textFunction} = this.props.navigation.state.params;
  textFunction('QQ_AQ');

这样， B 页面中就触发了 A 页面中的函数，并且传递了新的 text 值过去，此时 A 页面中的 this.state.text 就成了我们传递的 QQ_AQ。

如果需要在返回的时候更新 A 页面中的数据，那在 goBack 的时候调用 textFunction 函数就可以了。

---

监听实现 A 页面函数调用

传递函数到其他页面调用的方式，在单个的 A -> B 页面中比较好用。但是在页面层级深的时候，比如A->B ->C -> D，需要根据页面 D 中的操作数据来更新页面 A 中的数据时，传递函数的方式就太繁琐了。另外像 WebSocket 这种，收到消息时需要作出操作来更新组件状态的方式，传递函数也是不行的。此时应该使用 DeviceEventEmitter 来实现。

具体参见 原生模块-DeviceEventEmitter 文章的后半部分。

可以这样使用：

A 组件中：

componentDidMount() {
  this.subscription = DeviceEventEmitter.addListener('WebSocket_MESS',(message)=> {
    // handle event
    //接受到消息之后的处理操作
		...
  });
}

componentWillUnmount() {
  // When you want to stop listening to new events, simply call .remove() on the subscription
  this.subscription.remove();
}

在其他页面，需要发送消息时，这样：

  DeviceEventEmitter.emit('WebSocket_MESS', message);

WebSocket_MESS 是消息名称，发送消息时的消息名称和监听函数的消息名称一样才能被接收。

发送时的 message 就是要发送的具体消息内容。 emit 方法发送出去的消息，会被 A 组件中的监听获取到，然后就在 A 组件监听中调用函数等操作，根据消息内容更新操作数据了。