实现一个精简React -- 事件的绑定的原理（5）在react中，事件是通过 <div onClick={handle

在react中，事件是通过 <div onClick={handleClick}>Counter</div> 的方式去绑定的
转化成vdom的结构如下：

{
    type: 'div',
    props: {
        onCLick: handleClick,
        children: [
            {
                type: 'TEXT_ELEMENT',
                props: {
                    nodeValue: 'Counter'
                }
            }
        ]
    }
}

所以我们只需要获取到这个dom的props即可进行判断。

Object.keys(props).forEach((key) => {
    if (key !== "children") {
        // 判断key的字符串是不是'on'开头
        if (key.startsWith("on")) {
            const eventType = key.slice(2).toLocaleLowerCase();
            // 将事件绑定到dom上即可
            dom.addEventListener(eventType, props[key]);
        }
        dom[key] = props[key];
    }
});

项目源码：github.com/Cuimc/mini-…