2

我正在寻找以平滑方式迁移 DOM 树的良好解决方案。让我们想象一下这样的 DOM 树，它显示了一个书籍列表：

<div class="books">
  <div class="book">
    <div class="title">Book 1</div>
    ...
  </div>
  <div class="book">
    <div class="title">Book 2</div>
    ...
  </div>
  ...
</div>

此列表应由我从服务器输入生成的新版本更新：

<div class="books">
  <div class="book">
    <div class="title">This is a new Book</div>
      ...
    </div>
  <div class="book">
    <div class="title">Another book</div>
    ...
  </div>
  <div class="book">
    <div class="title">Book 2</div>
    ...
  </div>
  ...
</div>

我可以用新的结构替换整个结构。这会导致屏幕上的大闪烁，我想避免这种情况。我的目标是以递归方式遍历元素，并根据发现的旧结构和新结构之间的差异，我只会更新改变的元素。

该算法不是很容易以稳健的方式实现。这就是为什么我要问，是否有人知道可以实现这一目标的库。

4

1 回答 1

1

我不完全清楚你在问什么，但React.js是一个可以处理你正在谈论的事情的库。该库维护 DOM 的虚拟副本，当进行需要修改页面的更改时，真实和虚拟 DOM 会有所不同，仅对页面进行必要的更改。

不过坦率地说，React 似乎有点矫枉过正，除非你决定真的想要一个严肃的重量级库来处理你的模型视图。

如果您遇到 DOM 更改口吃问题，您可以考虑使用requestAnimationFrame( mdn ) 包装更新调用。

至于自己实现一个差异算法，听起来这可能是一个非常有趣的练习！

链接：

https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame http://facebook.github.io/react/

于 2014-04-23T11:54:05.507 回答