function render(element,container){
if(typeof element == 'string' || typeof element == 'number'){ //如果element是一个普通的字符串或者数字，就创建文本节点并添加进去
container.appendChild(document.createTextNode(element));
}
//这里是因为在执行React.createElement()方法之后返回的element元素包含了type、props属性
let type = element.type; // 获取react元素的类型
let props = element.props; //获取react元素的属性
if(typeof type === 'function'){
let renderedElement;
if(type.isReactComponent){ //说明是一个类组件
let inst = new type(props);
renderedElement = inst.render(); //调用class的render方法返回react元素
}else{ //函数组件
renderedElement = type(props);
}
type = renderedElement.type;
props = renderedElement.props;
}
//创建react元素
let domElement = document.createElement(type);
for(let propName in props){
if(propName == 'className'){
domElement.className = props[propName];
}else if(propName == 'style'){
let styleObj = props[propName];
for(let attr in styleObj){
domElement.style[attr] = styleObj[attr];
}
}else if(/^on[A-Z]/.test(propName)){ //处理react事件
domElement[propName.toLowerCase()] = props[propName];
}else if(propName == 'children'){
let children = Array.isArray(props.children) ? props.children : [props.children];
children.forEach(child => render(child,domElement));
}
}
container.appendChild(domElement);
}
export default {
render
}
React源码解析之ReactDOM.render()
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 上回说到了ReactMount._renderNewRootComponent中调用了ReactUpdates.b...
- 上篇博客介绍了instantiateReactComponent方法，方法内部实现还是很简单的，那么回到react...
- 英文注释翻译 React 中的 Transaction 创建一个黑盒环境来对方法进行封装，它能够封装任何方法，以便...
- 之前介绍了React16.8版本的React公用API，本着学习最新版的React的想法，但是败在了Fiber的阵...
