addChangeListener 在 Facebook React Todo 示例中的工作原理

Question

全部：

我对 React 还是很陌生。当我关注它的 TodoMVC example 时，有一个问题让我非常困惑：

在 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. 没有。 this.on 中的 this 指的是商店。提供的回调引用了_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());
  }
}

1. 是的。 Flux Stores 中有 EventEmitters，旨在为每个事件提供多个侦听器。