>[success] # h函數 ~~~ 1.將函數表達式的形式渲染成 虛擬dom，我們這里處理不像'snabbdom',對 參數做了重載處理，我們這里采用最簡單的僅僅判斷是'對象'還是'文本' 如果是文本就手動轉成虛擬dom ~~~ >[danger] ##### 代碼部分 ~~~ 1.我們這里直接判斷如果是對象就默認是h函數返回的虛擬dom，如果不是 默認是文本，并且將文本轉換成h函數形式 2.雖然沒有使用遞歸的形式依舊可以吧這種層級嵌套的格式解析，依靠的 就是每個children ，除了文本以外都是h函數舉個例子 '<div id="container"><span style="color:red">hello</span>zf</div>' 這中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 } } ~~~