实现一个函数 render(vdom, container)，将虚拟 DOM 渲染成真实 DOM

推荐答案

-- -------------------- ---- -------
-------- ------------ ---------- -
    -- ------- ---- --- -------- -- ------ ---- --- --------- -
        -- -- ---- ----------------
        -----------------------------------------------------
        -------
    -

    -- ------
    ----- ------- - ----------------------------------

    -- ----
    -- ------------ -
        ------------------------------------ -- -
            -- ----- --- ----------- -
                -- -------
                --------------------------------- -- ------------- ----------
            - ---- -- ---------------------- -- ------ ---------------- --- ----------- -
                -- ----
                ----- --------- - --------------------------------
                ----------------------------------- ------------------
            - ---- -
                -- ------
                -------------------------- ------------------
            -
        ---
    -

    -- ---------
    -------------------------------
-

本题详细解读

1. 函数功能

render(vdom, container) 函数的作用是将虚拟 DOM（vdom）渲染成真实 DOM，并将其插入到指定的容器（container）中。

2. 参数说明

• vdom: 虚拟 DOM 对象，通常是一个包含 type 和 props 属性的对象。
• container: 真实 DOM 容器，通常是 document.getElementById('root') 这样的 DOM 元素。

3. 实现步骤

1. 处理文本节点：如果 vdom 是字符串或数字，直接创建文本节点并插入到容器中。
2. 创建元素节点：根据 vdom.type 创建对应的 DOM 元素。
3. 处理属性：
   • 如果属性是 children，递归调用 render 函数处理子节点。
   • 如果属性是事件（以 on 开头），则添加事件监听器。
   • 其他普通属性直接通过 setAttribute 方法设置。
4. 插入容器：将创建好的 DOM 元素插入到指定的容器中。

4. 代码分析

• 递归处理子节点：通过递归调用 render 函数，可以处理任意深度的虚拟 DOM 树。
• 事件处理：通过判断属性名是否以 on 开头，可以动态添加事件监听器。
• 属性设置：使用 setAttribute 方法可以处理大部分 HTML 属性。

5. 使用示例

-- -------------------- ---- -------
----- ---- - -
    ----- ------
    ------ -
        ---------- ------------
        --------- -
            - ----- ----- ------ - --------- ------- ------- - --
            - ----- ---- ------ - --------- ----- -- - ----------- - -
        -
    -
--

------------ ---------------------------------

这个示例会将一个包含 h1 和 p 标签的 div 渲染到 id 为 root 的容器中。