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

2023-11-06

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的虚拟节点,共勉!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React(三)自定义render处理map的虚拟节点和diff算法 的相关文章

随机推荐