日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

 
 
 
 

  
  
  
  
React.createElement( 
  
  
  
  
  "div", 
  
  
  
  
  null, 
  
  
  
  
  React.createElement("img", { 
  
  
  
  
    src: "avatar.png", 
  
  
  
  
    className: "profile" 
  
  
  
  
  }), 
  
  
  
  
  React.createElement(Hello, null) 
  
  
  
  
); 
 
 
 
 

 
 
 
 

  
  
  
  
ReactDOM.render(,  document.getElementById("root")); 
 
 
 
 

 
 
 
 

  
  
  
  
class ClassComponent extends Component { 
  
  
  
  
  static defaultProps = { 
  
  
  
  
    color: "pink" 
  
  
  
  
  }; 
  
  
  
  
  render() { 
  
  
  
  
    return ( 
  
  
  
  
       
  
  
  
  
        
ClassComponent
 
  
  
  
  
        {this.props.name}
 
  
  
  
  
      

這些類別最終都會被轉(zhuǎn)化成React.createElement這種形式

React.createElement其被調(diào)用時會傳?標(biāo)簽類型type，標(biāo)簽屬性props及若干子元素children，作用是生成一個虛擬Dom對象，如下所示：

 
 
 
 

  
  
  
  
function createElement(type, config, ...children) { 
  
  
  
  
    if (config) { 
  
  
  
  
        delete config.__self; 
  
  
  
  
        delete config.__source; 
  
  
  
  
    } 
  
  
  
  
    // ! 源碼中做了詳細(xì)處理，?如過濾掉key、ref等 
  
  
  
  
    const props = { 
  
  
  
  
        ...config, 
  
  
  
  
        children: children.map(child => 
  
  
  
  
   typeof child === "object" ? child : createTextNode(child) 
  
  
  
  
  ) 
  
  
  
  
    }; 
  
  
  
  
    return { 
  
  
  
  
        type, 
  
  
  
  
        props 
  
  
  
  
    }; 
  
  
  
  
} 
  
  
  
  
function createTextNode(text) { 
  
  
  
  
    return { 
  
  
  
  
        type: TEXT, 
  
  
  
  
        props: { 
  
  
  
  
            children: [], 
  
  
  
  
            nodeValue: text 
  
  
  
  
        } 
  
  
  
  
    }; 
  
  
  
  
} 
  
  
  
  
export default { 
  
  
  
  
    createElement 
  
  
  
  
}; 
 
 
 
 

createElement會根據(jù)傳入的節(jié)點信息進(jìn)行一個判斷：

• 如果是原生標(biāo)簽節(jié)點， type 是字符串，如div、span
• 如果是文本節(jié)點， type就沒有，這里是 TEXT
• 如果是函數(shù)組件，type 是函數(shù)名
• 如果是類組件，type 是類名

虛擬DOM會通過ReactDOM.render進(jìn)行渲染成真實DOM，使用方法如下：

 
 
 
 

  
  
  
  
ReactDOM.render(element, container[, callback]) 
 
 
 
 

當(dāng)首次調(diào)用時，容器節(jié)點里的所有 DOM 元素都會被替換，后續(xù)的調(diào)用則會使用 React 的 diff算法進(jìn)行高效的更新

如果提供了可選的回調(diào)函數(shù)callback，該回調(diào)將在組件被渲染或更新之后被執(zhí)行

render大致實現(xiàn)方法如下：

 
 
 
 

  
  
  
  
function render(vnode, container) { 
  
  
  
  
    console.log("vnode", vnode); // 虛擬DOM對象 
  
  
  
  
    // vnode _> node 
  
  
  
  
    const node = createNode(vnode, container); 
  
  
  
  
    container.appendChild(node); 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
// 創(chuàng)建真實DOM節(jié)點 
  
  
  
  
function createNode(vnode, parentNode) { 
  
  
  
  
    let node = null; 
  
  
  
  
    const {type, props} = vnode; 
  
  
  
  
    if (type === TEXT) { 
  
  
  
  
        node = document.createTextNode(""); 
  
  
  
  
    } else if (typeof type === "string") { 
  
  
  
  
        node = document.createElement(type); 
  
  
  
  
    } else if (typeof type === "function") { 
  
  
  
  
        node = type.isReactComponent 
  
  
  
  
            ? updateClassComponent(vnode, parentNode) 
  
  
  
  
        : updateFunctionComponent(vnode, parentNode); 
  
  
  
  
    } else { 
  
  
  
  
        node = document.createDocumentFragment(); 
  
  
  
  
    } 
  
  
  
  
    reconcileChildren(props.children, node); 
  
  
  
  
    updateNode(node, props); 
  
  
  
  
    return node; 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
// 遍歷下子vnode，然后把子vnode->真實DOM節(jié)點，再插入父node中 
  
  
  
  
function reconcileChildren(children, node) { 
  
  
  
  
    for (let i = 0; i < children.length; i++) { 
  
  
  
  
        let child = children[i]; 
  
  
  
  
        if (Array.isArray(child)) { 
  
  
  
  
            for (let j = 0; j < child.length; j++) { 
  
  
  
  
                render(child[j], node); 
  
  
  
  
            } 
  
  
  
  
        } else { 
  
  
  
  
            render(child, node); 
  
  
  
  
        } 
  
  
  
  
    } 
  
  
  
  
} 
  
  
  
  
function updateNode(node, nextVal) { 
  
  
  
  
    Object.keys(nextVal) 
  
  
  
  
        .filter(k => k !== "children") 
  
  
  
  
        .forEach(k => { 
  
  
  
  
        if (k.slice(0, 2) === "on") { 
  
  
  
  
            let eventName = k.slice(2).toLocaleLowerCase(); 
  
  
  
  
            node.addEventListener(eventName, nextVal[k]); 
  
  
  
  
        } else { 
  
  
  
  
            node[k] = nextVal[k]; 
  
  
  
  
        } 
  
  
  
  
    }); 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
// 返回真實dom節(jié)點 
  
  
  
  
// 執(zhí)行函數(shù) 
  
  
  
  
function updateFunctionComponent(vnode, parentNode) { 
  
  
  
  
    const {type, props} = vnode; 
  
  
  
  
    let vvnode = type(props); 
  
  
  
  
    const node = createNode(vvnode, parentNode); 
  
  
  
  
    return node; 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
// 返回真實dom節(jié)點 
  
  
  
  
// 先實例化，再執(zhí)行render函數(shù) 
  
  
  
  
function updateClassComponent(vnode, parentNode) { 
  
  
  
  
    const {type, props} = vnode; 
  
  
  
  
    let cmp = new type(props); 
  
  
  
  
    const vvnode = cmp.render(); 
  
  
  
  
    const node = createNode(vvnode, parentNode); 
  
  
  
  
    return node; 
  
  
  
  
} 
  
  
  
  
export default { 
  
  
  
  
    render 
  
  
  
  
}; 
 
 
 
 

三、總結(jié)

在react源碼中，虛擬Dom轉(zhuǎn)化成真實Dom整體流程如下圖所示：

其渲染流程如下所示：

• 使用React.createElement或JSX編寫React組件，實際上所有的 JSX 代碼最后都會轉(zhuǎn)換成React.createElement(...) ，Babel幫助我們完成了這個轉(zhuǎn)換的過程。
• createElement函數(shù)對key和ref等特殊的props進(jìn)行處理，并獲取defaultProps對默認(rèn)props進(jìn)行賦值，并且對傳入的孩子節(jié)點進(jìn)行處理，最終構(gòu)造成一個虛擬DOM對象
• ReactDOM.render將生成好的虛擬DOM渲染到指定容器上，其中采用了批處理、事務(wù)等機制并且對特定瀏覽器進(jìn)行了性能優(yōu)化，最終轉(zhuǎn)換為真實DOM

參考文獻(xiàn)

https://bbs.huaweicloud.com/blogs/265503)

https://huang-qing.github.io/react/2019/05/29/React-VirDom/

https://segmentfault.com/a/1190000018891454