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