简单输出

在TinyReact中，renderDOM()对应ReactDOM.render()，createVDOM()对应React.createElement()

var rootDom = document.getElementById('helloExample')
renderDOM(createVDOM('div', {}, 'Hello TinyReact'), rootDom)

Controlled Input／事件绑定

该例子展示了一个Controlled Input和事件绑定的例子。在输入框中每输入一个字符，都会触发一次rerender()。由于TinyReact的增量更新，它只会更新数据变化了的部分。你可以打开Dev-tools查看有哪些变化导致的patches。

另外注意，在TinyReact中，会将所有props直接赋值给最终DOM，所以绑定事件的写法与DOM操作接口一致，如value、oninput等。

let app = document.getElementById('eventExample')
let name = 'TinyReact'

let onInput = (e) => {
  name = e.target.value
  rerender()
}

function rerender() {
  renderDOM(
    createVDOM(
      'div',
      {},
      createVDOM(
        'input',
        {
          value: name,
          oninput: onInput
        }
      ),
      createVDOM('div', {}, name, ' is wonderful')
    ),
    app
  )
}

rerender()