Question

来自react-measure的代码利用了当前浏览器中存在的新MutationObservers。 MSDN有this来说明这一点：

此外，突变观察者被设计为在通知您的观察者之前记录多个变化。他们批量变异记录，以避免通过事件向您的应用程序发送垃相比之下，突变事件是同步的，并中断正常的代码执行，以通知您的应用程序突变。尽管变异观察者采用了延迟通知模型，但您的应用程序观察者仍然可以保证在下一次重绘之前接收（并有机会处理）所有变异记录。

react-measure的MutationObserver获取MutationRecords数组，但示例代码只抓取第一个：

      <Measure
        whitelist={['height']}
        shouldMeasure={(mutations) => {
          // don't update unless we have mutations available
          if(mutations) {
            return mutations[0].target
          } else {
            return false
          }
        }}
        // notice how target gets passed into onMeasure now
        onMeasure={(dimensions, mutations, target) => {
          this.setState({dimensions})
        }}
      >
        <div>
          I can do cool things with my dimensions now :D
        </div>
      </Measure>

可悲的是，自述文件没有任何关于其原因的说法，MDN或MSDN也没有。我怎么知道要传递哪个MutationRecord？

Answer 1

在规范中，4.3.2 Queuing a mutation record部分，步骤4.8：

将记录追加到观察者的记录队列。

然后，如果您搜索规范＆＃34;排队变异记录＆＃34;，您将看到每个可以启动＆＃34;队列变异记录的行动＆＃34;算法。

从这里可以看出，例如，如果从DOM中删除节点，突变记录将排队（附加到MutationRecords列表）。

因此，我认为推断MutationRecords的顺序是安全的。

（你可以轻松地进行测试来验证这一点，同步添加和删除一些节点，然后检查MutationRecord）

MutationObservers收到的MutationRecords的顺序是什么？

1 个答案: