前端框架原理自测题：根据 JSX / Vue 模板写出 render 函数 / VNode

JSX

<div className="container">
    <p onClick={onClick} data-name="p1">
        hello <b>{name}</b>
    </p>
    <img src={imgSrc}/>
    <MyComponent title={title}></MyComponent>
</div>
1
2
3
4
5
6
7

Vue 模板

<div class="container">
    <p @click="onClick" data-name="p1">
        hello <b>{{name}}</b>
    </p>
    <img :src="imgSrc"/>
    <my-component :title="title"></my-component>
</div>
1
2
3
4
5
6
7

render 函数

技术要点：

• render 函数即 function render(){}
• 返回值为 return h() 函数
• h() 函数的第一个参数为标签、第二个参数为属性事件等组成的对象，第三个参数为子元素数组（用数组是因为子元素有顺序）
• 标签自带的属性放 props 里（避开关键字 class ，改用 className）

        props: {
            className: 'container'
        },
1
2
3

• 自定义数据属性放 dataset 里

            dataset: {
                name: 'p1'
            },
1
2
3

• 事件放 on 里

            on: {
                click: onClick // 变量
            }
1
2
3

• 子元素为纯变量时

[name]
1

• 子组件的写法

h(MyComponent, { // MyComponent 变量
            title: title // 变量
        }, [ /* 无子节点*/ ])
1
2
3

最终答案

function render() {
    return h('div', {
        props: {
            className: 'container'
        },
    }, [
        // <p>
        h('p', {
            dataset: {
                name: 'p1'
            },
            on: {
                click: onClick // 变量
            }
        }, [
            'hello ',
            h('b', {}, [name]) // name 变量
        ])
        
        // <img>
        h('img', {
            props: {
                src: imgSrc // 变量
            }
        }, [ /* 无子节点*/ ])

        // <MyComponent>
        h(MyComponent, { // MyComponent 变量
            title: title // 变量
        }, [ /* 无子节点*/ ])
    ])
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

VNode

技术要点：

• VNode 是一个对象
• tag 属性是标签，值为字符串
• props 属性是标签的属性，值为对象
• children 属性是子元素，值为数组
• 原生标签属性（避开关键字 class ，改用 className）

 className: 'container'
1

• 自定义属性用

dataset: {
    name: 'p1'
},
1
2
3

• 事件用

on: {
    click: onClick // 变量
}
1
2
3

• 子元素为纯文本时

'hello ',
1

• 属性为空也要写

props: {},
1

• 子组件写法

{
    tag: MyComponent, // 变量
    props: {
        title: title // 变量
    },
    children: [ /* 无子节点*/ ]
}
1
2
3
4
5
6
7

最终答案

const vnode = {
    tag: 'div',
    props: {
        className: 'container'
    },
    children: [
        // <p>
        {
            tag: 'p',
            props: {
                dataset: {
                    name: 'p1'
                },
                on: {
                    click: onClick // 变量
                }
            },
            children: [
                'hello ',
                {
                    tag: 'b',
                    props: {},
                    children: [name] // name 变量
                }
            ]
        },

        // <img>
        {
            tag: 'img',
            props: {
                src: imgSrc // 变量
            },
            children: [ /* 无子节点*/ ]
        },

        // <MyComponent>
        {
            tag: MyComponent, // 变量
            props: {
                title: title // 变量
            },
            children: [ /* 无子节点*/ ]
        }
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46