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

JSX

html 复制代码
<div className="container">
    <p onClick={onClick} data-name="p1">
        hello <b>{name}</b>
    </p>
    <img src={imgSrc}/>
    <MyComponent title={title}></MyComponent>
</div>

Vue 模板

html 复制代码
<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)
js 复制代码
        props: {
            className: 'container'
        },
  • 自定义数据属性放 dataset 里
js 复制代码
            dataset: {
                name: 'p1'
            },
  • 事件放 on 里
js 复制代码
            on: {
                click: onClick // 变量
            }
  • 子元素为纯变量时
js 复制代码
[name]
  • 子组件的写法
js 复制代码
h(MyComponent, { // MyComponent 变量
            title: title // 变量
        }, [ /* 无子节点*/ ])

最终答案

js 复制代码
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)
js 复制代码
 className: 'container'
  • 自定义属性用
js 复制代码
dataset: {
    name: 'p1'
},
  • 事件用
js 复制代码
on: {
    click: onClick // 变量
}
  • 子元素为纯文本时
js 复制代码
'hello ',
  • 属性为空也要写
js 复制代码
props: {},
  • 子组件写法
js 复制代码
{
    tag: MyComponent, // 变量
    props: {
        title: title // 变量
    },
    children: [ /* 无子节点*/ ]
}

最终答案

js 复制代码
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: [ /* 无子节点*/ ]
        }
    ]
}
相关推荐
li理5 小时前
鸿蒙应用开发深度解析:从基础列表到瀑布流,全面掌握界面布局艺术
前端·前端框架·harmonyos
EndingCoder1 天前
React 19 与 Next.js:利用最新 React 功能
前端·javascript·后端·react.js·前端框架·全栈·next.js
页面仔Dony2 天前
Vue2 与 Vue3 深度对比
vue.js·前端框架
ZsTs1192 天前
还在死记 Vue 2 和 Vue 3 的区别?12个核心模块对比,让你彻底告别面试难题!
vue.js·面试·前端框架
我想说一句2 天前
轻松搞定Next.js+Prisma全栈开发
前端·前端框架·next.js
wow_DG3 天前
【React ✨】从零搭建 React 项目:脚手架与工程化实战(2025 版)
前端·react.js·前端框架
程序员张33 天前
Vue3+ElementPlus倒计时示例
javascript·vue.js·前端框架
井云AI3 天前
井云智能体封装小程序:独立部署多开版 | 自定义LOGO/域名,打造专属AI智能体平台
人工智能·后端·小程序·前端框架·coze智能体·智能体网站·智能体小程序
OEC小胖胖4 天前
【React 设计模式】受控与非受控:解构 React 组件设计的核心模式
前端·react.js·设计模式·前端框架·web
会飞的鱼先生4 天前
react的基本使用
前端·react.js·前端框架