Hand write a simple virtual DOM rendering

let domNode {
  tagName: 'ul'.props: {class: 'list'},
  children: [{
    tagName: 'li'.childrem: ['item1'],
  },{
    tagName: 'li'.childrem: ['item2'],}],}Copy the code

Build a render function that renders the DOM object as the following DOM

<ul class="list">
  <li>item1</li>
  <li>item2</li>
</ul>
Copy the code

Implementation method, pay attention to the boundary conditions

function render(domNode) {
  if(! domNode)return document.createDocumentFragment()
  let $el
  
  if (typeof domNode === 'object') {
    $el = document.createElement(domNode.tagName)
    
    if(domNode.hasOwnProperty('props')) {
      for (let key in domNode.props) {
        $el.setAttribute(key, domNode.props[key])
      }
    }
    
    if (domNode.hasOwnProperty('children')) {
      domNode.children.forEach((val) = > {
        const $childEl = render(val)
        $el.appendChild($childEl)
      })
    } else {
      $el = document.createTextNode(domNode)
    }
  }
  
  return $el
 
}
Copy the code