您的位置：首页 > Web前端 > React

react:初始小例子

2019-06-09 09:49 1291 查看

创建虚拟dom,并且渲染到页面上

虚拟dom的定义：虚拟dom 是描述dom节点的js对象来进行比较最小差异

<body>
<!-- <div class="box" id="wrap">
今天是周日
<p>北京</p>

</div> -->
<div id="root"></div>
<script>
let oP = createElement('p', {
'class': 'list'
}, ["北京"])
let oDiv = createElement("div", {
class: "box",
id: "wrap",
style: {
width: "140px",
height: "140px",
background: "deepskyblue"
},
}, ["今天是周日", oP]);
//  console.log(oDiv)
function createElement(tag, props, children) {
return {
tag,
props: {...props
},
children: [...children],
}
}
//把虚拟dom转化成真实的dom,并且把它渲染到页面上
render(oDiv, document.getElementById("root"));

function render(vTree, root) {
//  console.log(vTree, root); //这里打印出来的是里面的属性和获取到的root节点
let target1 = createDom(vTree);
root.appendChild(target1);
//   把虚拟dom转化成真实的dom,
function createDom(vTree) {
let {
tag,
props,
children
} = vTree;
//  console.log(tag, props, children);
//创建节点
let targetDom = document.createElement(tag);
// console.log(targetDom)
// 添加属性
// setAttribute(key, value)
// console.log(Object.entries(props)) //解构出来是一个二维数组，所以需要遍历
Object.entries(props).forEach(item => {
let [key, value] = item;
// console.log(key, value)
if (typeof value == "object") {
value = Object.entries(value).map(item => item[0] + ":" +        item[1]).join(";")
}
targetDom.setAttribute(key, value)
})
//添加子节点
if (children) {
children.forEach(item => {
console.log(item) //p标签
let targetText = typeof item == 'string' ? document.createTextNode(item) : targetDom.appendChild(createDom(item));
targetDom.appendChild(targetText);
})
}
return targetDom;
}
}
</script>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航