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. ＆＃34; this.on＆＃34;知道回调的背景（我的意思是它如何记住＆＃34;这个＆＃34;来自_onChange）

2. 如果有多个TodoApp注册了他们的_onChange，那么todoStore会保留所有回调的列表怎么办？

谢谢

Answer 1

1. 没有。 this.on中的_onChange指的是商店。提供的回调引用this函数，该函数使用自己的TodoApp。要使它工作，它需要绑定到.bind。我认为这个例子来自React的自动装订时代。现在你可以在componentDidMount或类构造函数中使用componentDidMount: function() { TodoStore.addChangeListener(this._onChange.bind(this)); }, 。

Local Bind

= () =>

OR类绑定（this为类创建arrow function，在构造函数范围内关闭class TodoApp extends React.Component { componentDidMount = () => { TodoStore.addChangeListener(this._onChange); } _onChange = () => { this.setState(getTodoState()); } }

__iexact

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