1.2 最简单的renden实现

最新推荐文章于 2022-05-30 16:15:17 发布

转载最新推荐文章于 2022-05-30 16:15:17 发布 · 359 阅读

react全家桶专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个简单的React元素创建和渲染的实现方式。通过定义ReactElement构造函数和createElement辅助函数，结合myRender函数来将React元素转换为DOM节点并挂载到指定容器中。示例展示了如何使用这些函数构建嵌套的DOM结构。

// 最简单的renden实现
function ReactElement(type,props) {
    this.type=type
    this.props=props
}
function createElement(type,props,...children) {
    if(children.length==1){
        children=children[0]
    }

    return new ReactElement(type,{
        ...props,
        children:children
    })
}
let myRender=(obj,container)=>{
    let {type,props}=obj
    let ele=document.createElement(type);
    for(let key in props){
        if(key=='children'){
            // 数组
            if(typeof props[key]=='object'){
                props[key].forEach(item=>{
                    if(typeof item=='object'){
                        myRender(item,ele)
                    }
                    else{
                        ele.appendChild(document.createTextNode(item))
                    }
                })
            }
            // 一个
            else{
                ele.appendChild(document.createTextNode(props[key]))
            }
        }
        else if(key=='className'){
            ele.setAttribute('class',props[key])
        }
        else{
            ele.setAttribute(key,props[key])
        }
    }
    container.appendChild(ele)
}

console.log(createElement(
    'h1',
    {className:'red'},
    '刘，',
    createElement(
        'span',
        {id:'handsome'},
        '帅哥',
    )
    )
)

myRender(createElement(
    'h1',
    {className:'red'},
    '刘，',
    createElement(
        'span',
        {id:'handsome'},
        '帅哥',
    )
), document.getElementById('root'));