reactjs - 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 指的是Store。提供的回调引用 _onChange 函数，该函数使用自己的 this。为了让它工作，它需要绑定(bind)到 TodoApp。我认为这个例子来自 React 的自动绑定(bind)时代。现在，您可以在 componentDidMount 或类构造函数中使用 .bind。

本地绑定(bind)

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

OR 类绑定(bind)(= () => 为类创建一个 arrow function，在构造函数范围内关闭 this)

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

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

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