33行react简要分析

一、简介

前段时间看到一个用33行代码就实现了一个非常基本的react代码。感觉还是蛮有趣的，代码如下:

其主要实现了两大功能:
① 生成虚拟DOM；
② 根据虚拟DOM渲染出真实的DOM；

无注释版：https://github.com/leontrolsk...
有注释版：https://github.com/leontrolsk...

二、代码分析

虽然代码总共才33行，但是写的非常简洁，可能不是一下就能看懂，我对此细细研读了一番，用更加明了的方式重新写了一下。主要就是对外暴露了React.createElement()和React.render()两个方法。
① 实现代码基本框架

// 定义一个React类并对外暴露
class React {
    // 负责创建虚拟DOM
    static createElement(...args) {
    
    }
    // 负责将虚拟DOM渲染成真实的DOM
    static render(parent, v) {
        
    }
}
export default React;

② 实现React.createElement()方法
createElement()方法主要就是解析传递过来的参数，然后解析出标签名、类名数组、属性对象、子节点数组。

• 解析标签名: 第一个参数为字符串中包含标签名，这个参数支持点的形式，如 div.redColor.bluebg，所以需要以点号进行分割成数组["div", "redColor", "bluebg"]，将数组的第一个元素作为标签名，剩余的元素都作为元素的类名。
• 解析元素的属性对象: 通常传入的第二个参数对象为元素的属性对象，但是也可以不传或直接传入元素的子节点，所以需要对第二个参数进行判断，看一下是否是属性对象。判断的依据就是，如果第二个参数是null、string、number、array、vnode，那么就不是属性对象，而是子节点。

class React {
    // 判断能不能渲染，不能渲染则为属性对象
    static isRenderable(v) {
        return v === null || ['string', 'number'].includes(typeof v) || v.__m || Array.isArray(v);
    }
}

• 解析子节点: 解析完标签名和属性对象后，剩下的参数都是子节点，只不过参数有可能是一个数组，所以需要对其进行判断，如果是数组则需要遍历数组，然后再递归将其添加到children数组中。

class React {
    // 负责创建虚拟DOM
    static createElement(...args) {
        // ① 将attrs初始化为一个空对象{}，并解构出第一个参数head
        let attrs = {};
        let [head, ...tail] = args;
        // ② 获取标签名和第一个参数中传递的类名
        let [tag, ...classes] = head.split('.');
        // ③ 获取传入的attrs对象，首先判断tail中的第一部分能不能渲染，如果不能渲染，说明是attrs对象，否则为子节点
        if (tail.length && !this.isRenderable(tail[0])) { // 如果传入的第二个参数不能被渲染，那么第二个参数就是attrs对象
            [attrs, ...tail] = tail; // 取出attrs对象
        }
        // ④ 解析attrs对象中包含的类名
        if (attrs.class) { // 如果attrs属性对象中有class属性，那么将其中的类名放到classes中
            classes = [...classes, ...attrs.class];
        }
        // ⑤ 移除attrs对象中的class属性
        attrs = {...attrs}; 
        delete attrs.class;
        // ⑥ 初始化children为空数组[]
        const children = [];
        // ⑦ 定义一个addChildren()方法，将所有子节点加入到children数组中
        const addChildren = (v) => {
            if (v === null) { // 如果是null则直接返回，不将其加入到children数组中
                return;
            }
            if (Array.isArray(v)) { // 如果是数组则遍历数组并调用addChildren()
                v.map(addChildren);
            } else {
                children.push(v); // 非数组则直接将其添加到children数组中
            }
        }
        addChildren(tail);
        // ⑧ 返回虚拟DOM对象
        return {
            __m: true, // 是否是虚拟节点
            tag: tag || 'div', 
            attrs, classes, 
            children
        };
    }
}

③ 实现React.render()方法
React.render()方法主要传入一个真实的父节点和对应的虚拟节点，将真实父节点当做旧节点，将虚拟节点作为新节点，然后对新旧节点进行比较，没有则创建，有则更新，同时更新属性，然后进行递归比较其子节点，直到没有子节点为止。

class React {
    // 进行新旧节点的比较并渲染出真实DOM
    static render(parent, v) {
        // ① 取出真实节点下的所有真实子节点
        const olds = parent.childNodes || [];
        // ② 取出虚拟节点下的children属性对应的虚拟子节点
        const news = v.children || [];
        // ③ 移除超出的元素(如果旧的节点比新的节点多)
        for (const _ of Array(Math.max(0, olds.length - news.length))) {
            parent.removeChild(parent.lastChild);
        }
        // ④ 遍历所有虚拟子节点，没有子节点了则会结束render
        news.length > 0 && news.forEach((child, i) => {
            // 如果旧子节点不存在则创建一个
            let el = olds[i] || this.makeEl(child);
            if (!olds[i]) { // 如果旧节点不存在，则直接加入
                parent.appendChild(el);
            }
            // 判断新旧节点是否匹配
            const mismatch = (el.tagName || '') !== (child.tag || '').toUpperCase();
            if (mismatch) { // 如果不匹配，则创建出新节点，并且用新节点去替换掉旧节点
                (el = this.makeEl(child)) && parent.replaceChild(el, olds[i]);
            }
            // 更新节点属性
            this.update(el, child);
            // 递归更新子节点
            this.render(el, child);
        })
    }
    static makeEl(vnode) {
        if (vnode.__m) { // 如果是元素节点
            return document.createElement(vnode.tag);
        } else { // 如果是文本节点
            return document.createTextNode(vnode);
        }
    }
}

④ 实现update()方法
主要就是传入真实节点和虚拟节点，然后遍历虚拟节点的classes类名数组，将新的类名添加到真实节点上，遍历真实节点上的所有classList，然后移除虚拟DOM上不再使用的类名。遍历虚拟DOM节点上的attrs属性对象，并将新的属性添加到真实节点上，遍历真实DOM节点上的attributes，移除虚拟DOM上不再使用的属性。

class React {
    static update(el, v) {
        if (!v.__m) { // 如果是文本节点
            return el.data === `${v}` || (el.data = v);
        }
        // 遍历虚拟节点上所有的class，并添加到classList中
        for (const name of v.classes) {
            if (!el.classList.contains(name)) {
                el.classList.add(name);
            }
        }
        // 遍历真实节点的classList，移除虚拟节点没有的class
        for (const name of el.classList) {
            if (!v.classes.includes(name)) {
                el.classList.remove(name);
            }
        }
        // 遍历虚拟节点的attrs属性对象
        for (const name of Object.keys(v.attrs)) {
            if (el[name] !== v.attrs[name]) { // 如果发生变化，则更新
                el[name] = v.attrs[name]; // 更新
            }
        }
        // 遍历真实节点的attributes，移除虚拟节点上不存在的attrs
        for (const {name} of el.attributes) {
            if (!Object.keys(v.attrs).includes(name) && name !== 'class') {
                el.removeAttribute(name);
            }
        }
    }
}