前端框架原理自测题：根据 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>

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>

render 函数

技术要点：

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

        props: {className: 'container'},

• 自定义数据属性放 dataset 里

            dataset: {name: 'p1'},

• 事件放 on 里

            on: {click: onClick // 变量}

• 子元素为纯变量时

[name]

• 子组件的写法

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

最终答案

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 // 变量}, [ /* 无子节点*/ ])])
}

VNode

技术要点：

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

 className: 'container'

• 自定义属性用

dataset: {name: 'p1'
},

• 事件用

on: {click: onClick // 变量
}

• 子元素为纯文本时

'hello ',

• 属性为空也要写

props: {},

• 子组件写法

{tag: MyComponent, // 变量props: {title: title // 变量},children: [ /* 无子节点*/ ]
}

最终答案

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: [ /* 无子节点*/ ]}]
}