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

Question

全部：

我对React很陌生。当我以TodoMVC为例时，有一个问题让我非常困惑：

在TodoApp组件内部，它使用TodoStore.addChangeListener:注册其处理程序

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

并让TodoStore.addChangeListener中的CHANGE_EVENT触发_onChange回调：

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

让我困惑的是：

1. "this.on"如何知道回调的上下文（我的意思是它如何记住_onChange中的"this"）

2. 如果有多个TodoApp注册它们的_onChange，那么todoStore将维护所有回调的列表，该怎么办？

感谢

Answer 1

1. 事实并非如此。CCD_ 2中的CCD_。所提供的回调引用_onChange函数，该函数使用自己的this。为了使其工作，它需要绑定到TodoApp。我认为这个例子来自React的自动绑定时代。现在，您可以在componentDidMount或类构造函数中使用.bind

本地绑定

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

OR类绑定（= () =>为类创建一个箭头函数，在构造函数范围内关闭this）

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

2. 是的。In Flux Stores是EventEmitters，设计为每个事件都有多个侦听器