React(一)JSX概念和实例_Zoie_ting的博客-CSDN博客
React(二)实现自定义createElement和render_Zoie_ting的博客-CSDN博客
一、map的渲染
根据前两篇的实践,基本把JSX渲染出来了,但是在react中,高频使用的map怎么渲染?看一下输出:
![](https://img-blog.csdnimg.cn/ffc23afba7a24fd1b574d47675c74a52.png)
这里不是个对象,而是数组,数组里面是对象,结构和外面相同,因此,在递归children的时候,判断是否为数组,如果是,则循环递归一下即可:
function createElement(vnode) {
//...
children.forEach((vdom) => {
if(Array.isArray(vdom)){
vdom.forEach(v => {
let dom = initVnode(v);
dom && node.appendChild(dom);
})
} else {
let dom = initVnode(vdom);
dom && node.appendChild(dom);
}
});
return node;
}
二、diff算法
vue的diff和react的diff原理及其区别(纯文字)_Zoie_ting的博客-CSDN博客
总结
本篇主要在上一篇基础上扩展处理map的虚拟节点,共勉!