jsx和vdom的关系

jsx最终要被编译成js代码，jsx变成js代码有个核心的函数是React.createElement()，这个函数vdom里的h函数很相似。
vdom是react引入并推广的，vdom里面有两个核心函数：h函数 和 patch函数
为何需要vdom：

• vdom是react初次推广开来的，结合jsx
• jsx就是模板，最终要被渲染成html。类似Vue的模板最终要渲染成html，所有渲染成html的模板都要转化成js代码，所有渲染成html都是通过vdom来执行的，
• 初次渲染 + 修改 state 后的re-render（渲染html的两个场景）
• 正好符合vdom的应用场景，

React.createElement 和 h :

其实vdom的h函数会生成一个vnode，react的React.creareElement函数也是返回一个vnode，vnode是以下这种结构：

何时patch：

• 初次渲染会触发patch(container,vnode)：ReactDOM.render(<App/>,container)，<App/>是一个jsx结构，虽然这个结构后面还有好多内容，但只要是jsx语法就需要转换成js代码来执行，接着会返回vnode。
• 多次渲染 re-render：setState时会修改数据，触发patch(vnode,newVnode)，
  总结：
  jsx语法要转换成js代码，这个js代码最终会生成vnode。