函数表达解析 – h 和 create-element

>[success] # h函数 ~~~ 1.将函数表达式的形式渲染成 虚拟dom，我们这里处理不像'snabbdom',对 参数做了重载处理，我们这里采用最简单的仅仅判断是'对象'还是'文本' 如果是文本就手动转成虚拟dom ~~~ >[danger] ##### 代码部分 ~~~ 1.我们这里直接判断如果是对象就默认是h函数返回的虚拟dom，如果不是 默认是文本，并且将文本转换成h函数形式 2.虽然没有使用递归的形式依旧可以吧这种层级嵌套的格式解析，依靠的 就是每个children ，除了文本以外都是h函数举个例子 '' 这中dom 我们用h函数表达 let oldVnode = h('div', { id: 'container', key: 1, class: 'abc' }, h('span', { style: { color: 'red', background: 'yellow' } }, 'hello'), 'zf' ); 执行顺序是从span的h函数开始，依次向外这就是即使层级嵌套，依旧可以 像递归的感觉层级解析，每一个都是h函数。这里看案例'zf'就是一个文本 他也没有class 这些dom属性，作为自己也没有自己的tag，因此其他属性 这里都设置成了undefined ~~~ ~~~ import {vnode} from './create-element' export default function h(tag,props,...children){ let key = props.key; delete props.key; // 属性中不包括key属性 children = children.map(child=>{ if(typeof child === 'object'){ return child }else{ return vnode(undefined,undefined,undefined,undefined,child) } }) return vnode(tag,props,key,children); } ~~~ >[success] # create-element -- 虚拟dom对象 ~~~ 1.最终h函数返回的是一个dom 以js形式表现的对象，这个对象定义在 'create-element.js'文件中 2.要注意了如果是文本的虚拟dom对象就不会有children，有children的就不会 有文本，因此下面的text 和 children 参数是不能同时存在的 ~~~ >[danger] ##### 代码 ~~~ export function vnode(tag, props, key, children, text) { return { tag, // 表示的是当前的标签名 props, // 表示的是当前标签上的属性 key, // 唯一表示用户可能传递 children, text } } ~~~