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

来吧

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值