javascript - 简单来说，Tracker.autorun 是做什么的？

Question

Tracker 方法并不完全属于 Meteor 功能的核心，很少在教程和初学者书籍中使用(如果是的话，也没有很好地解释)，因此被认为更“可怕” “比框架的其余大部分部分都要多。

就我而言，我从未成功地将 Tracker.autorun 纳入我的项目中，因为它似乎从未达到预期的效果。这就是文档所说的:

Run a function now and rerun it later whenever its dependencies change.

对我来说，这听起来像是一种使非反动来源变得反动的方式，但接下来你看一下例子，第一个看起来像这样:

Tracker.autorun(function () {
  var oldest = _.max(Monkeys.find().fetch(), function (monkey) {
    return monkey.age;
  });
  if (oldest)
    Session.set("oldest", oldest.name);
});

这与不使用 Tracker.autorun 到底有什么不同？游标已经是一个反动源，并且让事情变得更加困惑下一个示例涉及另一个反动源: session 。

Tracker.autorun 是否仅适用于反动源，如果是这样，在 Tracker 中使用它们有什么好处？让他们变得双重反动？

Answer 1

为了实现响应式编程(事件驱动编程的一种变体)，Meteor 使用了 2 个不同的概念:

• 响应式(Reactive)计算:每次修改底层依赖项时都会重新运行的代码片段。
• 响应式(Reactive)数据源:在响应式(Reactive)计算中使用时能够注册依赖关系的对象，使其无效并使用新的数据值再次运行。

这两个概念是由两个很少使用的底层实现的Tracker对象，即Tracker.Computation和辅助对象 Tracker.Dependency这是一个用于存储一组计算的容器。

一个Tracker.Computation是一个具有 2 个重要方法的对象:

• invalidate() ，这导致计算重新运行。
• onInvalidate(callback)用于实际运行计算任意代码。

当您调用Tracker.autorun时，您基本上是在创建一个新的计算并注册一个 onInvalidate使用您作为参数传递的函数进行回调。

一个Tracker.Dependency是使用 2 种方法进行计算的集合。

• depend() :将当前计算添加到集合中。
• changed() :调用时，使每个注册的计算无效。

当响应式(Reactive)数据源在计算中注册依赖项时，它会调用 Dependency.depend() ，它只是将当前计算(如果有)添加到跟踪计算集中。

响应式(Reactive)数据源修改时，调用Dependency.changed()这将使集合中每个已注册的计算无效。

来源:The Meteor Tracker manual .

在 Meteor 框架中，您通常只处理几个实现响应式编程概念的更高级别的对象。

• 响应式(Reactive)计算是使用 Tracker.autorun 生成的，默认情况下，模板助手始终在响应式(Reactive)计算中运行。
• 响应式(Reactive)数据源正在使用Tracker.Dependency为了使计算无效，它们包括 MiniMongo 游标，Session变量，Meteor.user()等等...

使用Tracker.autorun当您需要在模板助手之外以 react 方式重新运行任意代码时，例如在模板 onRendered 内生命周期事件，使用快捷键this.autorun (生成响应式(Reactive)计算，当模板被销毁时自动停止)以对任何反应式数据源修改使用react。

这是一个模板的小示例，该模板计算您单击按钮的次数，并在单击 10 次时将计数器重置为 0。

HTML

<template name="counter">
  <div class="counter>
    <button type="button">Click me !</button>
    <p>You clicked the button {{count}} times.</p>
  </div>
</template>

JS

Template.counter.onCreated(function(){
  this.count = new ReactiveVar(0);
});

Template.counter.onRendered(function(){
  this.autorun(function(){
    var count = this.count.get();
    if(count == 10){
      this.count.set(0);
    }
  }.bind(this));
});

Template.counter.helpers({
  count: function(){
    return Template.instance().count.get();
  }
});

Template.counter.events({
  "click button": function(event, template){
    var count = template.count.get();
    template.count.set(count + 1);
  }
});