react native：リスナー/サービスの登録を解除するにはどうすればよいですか？

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をマウントします。これは複数のインスタンスで問題になります。

アクティブなマウント済みのコンポーネントのみをリッスンし、アンマウントされるとすぐにリリースしたいと考えています。

アイデア？

ありがとうございます！

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); 
} 

重要なことは、関数への参照を維持することです、コンストラクタで結合置くことが重要である理由です。