本文主要是介绍前端框架原理自测题:根据 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: [ /* 无子节点*/ ]}]
}
这篇关于前端框架原理自测题:根据 JSX / Vue 模板写出 render 函数 / VNode的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!