React 虛擬Dom 轉成 真實Dom 實現原理

Rocky1發表於2019-04-08
React

React 和 React-Dom 是核心模組

React：是核心庫，當使用JSX語法時，必須讓React 存在當前作用域下

React元素：是通過JSX語法建立的在JS中存在的HTML的標籤

JSX語法：是一種JS和Html組合1的一種混合語法

ReactDOM.render:

1> 把虛擬的DOM轉換成真實的DOM

2> 把真實的DOM插入到根元素中

3> ReactDOM 當render渲染時，會把根元素中的所有DOM結構進行替換

4> 第三個引數是個回撥函式，當把真實DOM渲染到頁面時，執行這個地方的回撥函式

React 虛擬Dom 轉成 真實Dom 實現原理

class Element{
    constructor(type,attr,children){
        this.type=type;
        this.attr=attr;
        this.children=children;
        /*this.props={...attr,children:children}*/
    }
    render(){
        // 這個方法將虛擬的DOM轉成真實的DOM；
        let ele = document.createElement(this.type);
        // 2. 設定行間屬性
        for(let key in this.attr){
            let _key = key;
            if(key==="className"){
                _key="class"
            }
            if(key==="htmlFor"){
                _key="for"
            }
            ele.setAttribute(_key,this.attr[key]);
        }
        // 3.children
        this.children.forEach(item=>{
            // 如果陣列中的成員是Element的例項,需要繼續呼叫render方法；將虛擬的DOM轉成真實的DOM；
            // 迴圈子節點，都放入ele中；
            let curEle = item instanceof Element?item.render():document.createTextNode(item);
            ele.appendChild(curEle);
        });
        return ele;// 將建立的元素轉成DOM返回；
    }
}
let obj = {
    createElement(type,attr,...children){
        // type: 元素型別
        // attr：行間屬性
        // children : 子節點 ... 把多餘的引數放進一個陣列中；
        return new Element(type,attr,children)
    }
}
let objDOM ={
    render(element,container){
        // container : 容器，根元素；
        // element: 虛擬的DOM物件；當render執行時，讓這個虛擬的DOM轉成真實的DOM；
        container.appendChild(element.render())
    }
}
let y = obj.createElement("div",{a:1,className:12},"中國北京")
objDOM.render(y,document.getElementById("root"))
複製程式碼

來吧

相關文章