【React入门】render方法

我们现在来实现一下。ReactDOM.render方法。

我们只做把将元素添加到DOM节点上。

function render(element, container) {
    const dom = document.createElement(element.type)
    
    container.appendChild(dom);
}

我们还需要递归的遍历，将子元素也添加上。

function render(element, container) {
    const dom = document.createElement(element.type)
    
    element.props.children.forEach(child => {
        return render(child, dom);
    })
    
    container.appendChild(dom);
}

还需要处理纯文本元素，如果element的type是TEXT_ELEMENT我们将创建一个text node。

function render(element, container) {
    const dom = element.type === "TEXT_ELEMENT" ?
        document.createTextNode("")
        : document.createElement(element.type)
    
    element.props.children.forEach(child => {
        return render(child, dom);
    })
    
    container.appendChild(dom);
}

最后我们将元素的props添加到元素上。

function render(element, container) {
    const dom = element.type === "TEXT_ELEMENT" ?
        document.createTextNode("")
        : document.createElement(element.type)
    
    const isProperty = key => key !== "children";
    Object.keys(element.props).filter(isProperty).forEach(name => {
        dom[name] = element.props[name]
    })
    
    element.props.children.forEach(child => {
        return render(child, dom);
    })
    
    container.appendChild(dom);
}

至此我们就完成了全部，JSX渲染到DOM上的整个过程。