react原理二（虚拟dom）

定义：

虚拟dom是一个JS对象树。当状态变更的时候，对比新的树和旧的树，把差异应用到真实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 欢迎你</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 (
     React.createElement(
        "div",
        null,
        React.createElement(
          "h1",
          { className: 'title' },
          "React 欢迎你"
        )
      )
    )
  }
}

render方法的作用就是将虚拟DOM渲染成真实的DOM。