React（三）自定义render处理map的虚拟节点和diff算法

React（一）JSX概念和实例_Zoie_ting的博客-CSDN博客

React（二）实现自定义createElement和render_Zoie_ting的博客-CSDN博客

一、map的渲染        

        根据前两篇的实践，基本把JSX渲染出来了，但是在react中，高频使用的map怎么渲染？看一下输出：

        这里不是个对象，而是数组，数组里面是对象，结构和外面相同，因此，在递归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的虚拟节点，共勉！