React 虚拟Dom 转成 真实Dom 实现原理

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渲染到页面时，执行这个地方的回调函数

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"))
复制代码

来吧