Skip to content

实现ReactDOM.render方法 ​

本节目标:理解“实现ReactDOM.render方法”的核心思路,并能把它用于实际开发或面试表达。 调用ReactDOM.render()方法,将React.createElement()方法返回的的对象也就是虚拟Dom转换成真实的dom,并将其挂载在真实Dom中去,我们一般使用document.getElementById来获取一个页面中真实的Dom。

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 =>
        render(child, dom)
    )
    container.appendChild(dom)
}

本站总访问 — 次