React 的虚拟 DOM

虚拟dom是一个JS对象树。当状态变更的时候，对比新的树和旧的树，把差异应用到真实DOM树上，视图更新。

• 虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象
• 状态变更时，记录新树和旧树的差异
• 最后把差异更新到真正的dom中

创建虚拟dom两种形式： 

1、jsx

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

class Header extends Component {
    render () {
        return (
           <div>
             <h1 className='title'>React的虚拟DOM</h1>
           </div>
        )
    }
}

ReactDOM.render(
    <Header />,
    document.getElementById('root')
)

2、js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

class Header extends Component {
  render () {
    return (