Giter VIP home page Giter VIP logo

Comments (3)

livoras avatar livoras commented on July 21, 2024

@snowmagic1 对于列表的diff,virtual dom需要提供额外key属性来唯一标识每一个节点,才能正确进行diff(这和Reat的key属性的作用一样)。上面的写法应该为:

  var el1 = el('div', {'id': 'container'}, [el('ul'), el('li', {key: 'uid1'}, ['1'])])
  var el2 = el('div', {'id': 'container'}, [el('ul'), el('li', {key: 'uid2'}, ['2']), el('li', {key: 'uid1'}, ['1'])])
  var d = diff(el1, el2)
  console.log(JSON.stringify(d))

结果:

{
   "0":[
      {
         "type":1,
         "moves":[
            {
               "index":1,
               "item":{
                  "tagName":"li",
                  "props":{
                     "key":"uid2"
                  },
                  "children":[
                     "2"
                  ],
                  "key":"uid2",
                  "count":1
               },
               "type":1
            }
         ]
      }
   ]
}

抱歉没有在文档中写清楚,后续加上。

from simple-virtual-dom.

snowmagic1 avatar snowmagic1 commented on July 21, 2024

ok, 我现在不太明白的地方是children reorder是做什么用的, 2种情况
如果children node没有key, 我的例子里完全可以用dsf得到同样2步的结果 - modify text + insert,所以在这种情况下reorder是多余的

所以reorder只有在children node里有key的情况下有用, 我这样理解对不对

BTW - 另外突然想起来call listdiff传了个'key'参数

from simple-virtual-dom.

livoras avatar livoras commented on July 21, 2024

@snowmagic1 对的,只有在有key的情况下才有用,没有key的话就会按顺序对子元素进行diff。有key的话会先进行排序再进行diff。

因为在实际当中可能会对列表进行数据的新增、删除、排序。例如邮箱里面的收件箱列表,可以根据时间重新排序等等。如果没有这个key属性,在进行diff的时候,就会按顺序的进行对比,那么有可能整个列表元素的内容都会被重新构造。如果提供key的话,会找出元素移动到了什么位置,再对内容进行diff,这样就可以尽量复用元素,避免大量的DOM操作。

可以参考:https://github.com/livoras/simple-virtual-dom/blob/master/lib/diff.js#L24-L38

from simple-virtual-dom.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.