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 と仮想 DOM が差分化され、必要な変更のみがページに加えられます。

率直に言って、React はやり過ぎのように思えますが、モデル ビューを処理する本格的な重量級のライブラリが本当に必要であると判断した場合を除きます。

DOM 変更の吃音に問題がある場合は、更新呼び出しをrequestAnimationFrame( mdn ) でラップすることを検討できます。

diff アルゴリズムを独自に実装することに関しては、非常に楽しい演習になりそうです!

リンク:

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

于 2014-04-23T11:54:05.507 に答える