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

这里让我困惑的是：

"this.on" 如何知道该回调的上下文（我的意思是它如何记住来自 _onChange 的 "this"）
如果有多个 TodoApp 注册它们的 _onChange 怎么办，所以 todoStore 会维护一个所有回调的列表？

谢谢

Answer 1

没有。 this.on 中的 this 指的是商店。提供的回调引用 _onChange 函数，该函数使用自己的 this。要让它工作，它需要绑定到 TodoApp。我认为这个例子来自 React 的自动绑定时代。现在，您可以在 componentDidMount 或 class 构造函数中使用 .bind。

本地绑定

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

OR class 绑定（= () => 为 class 创建一个 arrow function，在构造函数作用域关闭 this）

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

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

是的。在 Flux Stores 中 EventEmitters，并且设计为每个事件都有多个侦听器。

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

How addChangeListener works in Facebook React Todo example

reactjs

reactjs-flux