Appearance
实现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)
}