Skip to main content

How to write your own Virtual DOM

· One min read

引用文章链接

  • Virtual DOM is any kind of representation of a real DOM
  • When we change something in our Virtual DOM Tree, we get a new Virtual Tree. Algorithm compares these two trees (old and new), finds differences and makes only necessary small changes to real DOM so it reflects virtual

Representing our DOM Tree​

    <ul class=”list”>
        <li>item 1</li>
        <li>item 2</li>
    </ul>

turn to Js Object

    { type: ‘ul’, props: { ‘class’: ‘list’ }, children: [
        { type: ‘li’, props: {}, children: [‘item 1’] },
        { type: ‘li’, props: {}, children: [‘item 2’] }
    ] }
  • We represent DOM elements with objects like
    { type: ‘…’, props: { … }, children: [ … ] }