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。