javascript - react native : how to unregister a listener/service?

Question

我有一个项目列表。通过传递它的 itemId，每个项目都可以显示在 MyComponent 中。为了监听所选项目的变化，我传递了 myService:

<MyComponent myService={myService} id={itemId}/>

组件获取项目详细信息并开始监听服务:

componentDidMount() {
    this.fetchItemDetails(this.props.id); // fetch the item details

    this.props.myService.listensTo('eventId', () => { 
        // something changed, fetch again ... 
    });
}

componentWillUnmount() {
    // reset / unregister the listener for this instance 
}

问题:每次挂载 MyComponent 时都会注册监听器，这会成为多个实例的问题。

我只想监听 Activity 的、已安装的组件，并在卸载后立即取消监听。

有什么想法吗？

提前致谢!

Answer 1

您必须保留对用作回调的函数的引用。通常事件监听器所做的是保留在事件发生时必须调用的所有回调函数的内部结构，因此，当你想停止监听时，你必须告诉事件调度程序必须是哪个函数从列表中排除。因为唯一能为您提供该信息的是对回调函数本身的引用。我会做以下事情:

constructor(){
    super();
    this.myListener = this.myListener.bind(this); // Do this only if necessary
}

componentDidMount() {
    this.fetchItemDetails(this.props.id); // fetch the item details

    this.props.myService.listensTo('eventId', myListener);
}

myListener(){
    //...
}

componentWillUnmount() {
   // reset / unregister the listener for this instance
   this.props.myService.deregister('eventId', myListener);
}

重要的是保持对函数的引用，这就是为什么将绑定(bind)放在构造函数中很重要。