addChangeListener如何在Facebook React Todo示例中工作

Question

全部：

我是React的新手。當我跟隨其TodoMVC example，有一個問題是混淆了我這麼多：

裏面TodoApp組件，使用TodoStore.addChangeListener它註冊的處理程序：

componentDidMount: function() { 
    TodoStore.addChangeListener(this._onChange); 
    }, 
_onChange: function() { 
    this.setState(getTodoState()); 
    } 

而讓CHANGE_EVENT在TodoStore.addChangeListener來觸發_onChange回調：

addChangeListener: function(callback) { 
    this.on(CHANGE_EVENT, callback); 
    }, 

什麼這裏讓我困惑的是：

1. 如何「this.on」知道回調的背景下（我的意思是，它是如何記住「這個」從_onChange）

2. 如果什麼有多個TodoApp註冊自己的_onChange，所以todoStore將保持所有回調列表？

感謝

Answer 1

1. 沒有。 this在this.on是指商店。提供的回調引用_onChange函數，該函數使用它自己的this。爲了它的工作，它將需要被綁定到TodoApp。我認爲這個例子來自React的自動綁定時代。現在，您可以在componentDidMount或類構造函數中使用.bind。

本地綁定

componentDidMount: function() { 
    TodoStore.addChangeListener(this._onChange.bind(this)); 
    }, 

OR類結合（所述=() =>創建爲類arrow function，在構造範圍閉this）

class TodoApp extends React.Component { 
    componentDidMount =() => { 
    TodoStore.addChangeListener(this._onChange); 
    } 

    _onChange =() => { 
    this.setState(getTodoState()); 
    } 
} 

是的。在Flux Stores中有EventEmitters，並且設計爲每個事件都有多個監聽器。