前端框架原理自测题:根据 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: [ /* 无子节点*/ ]}]
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/21377.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

pip原理及常用命令

1、pip帮助文档 pip documentation 2、pip命令帮助 pip --help 或 pip 3、常用命令 pip install SomePackage # 最新版本 pip install SomePackage1.0.4 # 指定版本 pip install SomePackage>1.0.4 # 最小版本 pip install -i https://pypi.do…

计算机设备管理器端口不见了怎么办?

因为重装了系统&#xff0c;一切都得重新配置&#xff0c;但突然发现计算机资源设备里面端口这一选项居然不见了&#xff0c;这对一个嵌入式工程师是致命的&#xff0c;赶紧想想怎么处理 1、在电脑左下角windows右键&#xff0c;打开从上往下数第六个“资源管理器” 2、端口没…

Chrome 调试技巧

1. alert 在最早的时候&#xff0c;javascript 程序员调试代码都是通过 alert 进行&#xff0c;但 alert 会让整个程序被打断&#xff0c;并且还有一个很大的缺点&#xff0c;调试完成之后&#xff0c;如果忘记将 alert 删除 or 注释掉&#xff0c;导致别人访问该页面时会莫名…

迅狐短剧小程序源码:打造个性化的追剧体验

随着移动互联网的普及&#xff0c;短剧小程序源码的开发成为了影视爱好者的新宠。它不仅为用户提供了便捷的追剧体验&#xff0c;还通过推荐系统、观看历史、个性化喜好等特色功能&#xff0c;满足了用户的多样化需求。本文将深入探讨短剧小程序源码的特点、优势以及如何实现多…

创新指南|领导者如何评估自己的表现——麦肯锡专有的CEO卓越评估工具

CEO是任何组织中最具挑战性和要求最高的职位之一&#xff0c;尤其是在当前的经济环境下。这也是最重要的职位之一。研究表明&#xff0c;一家公司 45% 的业绩可归因于CEO的影响。但 CEO 们的实际表现如何&#xff1f;他们面临哪些问题&#xff1f;如何帮助他们发挥出最佳水平&a…

Java中的泛型类型参数详解

Java中的泛型机制为开发者提供了一种编写通用代码的强大工具&#xff0c;使得代码在编译时可以进行类型检查&#xff0c;从而减少运行时的错误。泛型类型参数可以帮助我们编写更加灵活和类型安全的代码。在Java的泛型类型参数中&#xff0c;我们经常会看到一些常见的符号&#…

代碼隨想录 day22|day23

二叉树(完) 二叉搜索树的最近公共祖先 题意&#xff1a;找到二叉树的两个节点的祖先节点 。 思路&#xff1a; 二叉树的中序遍历特性&#xff1a; 如果当前遍历的节点的值> 两个指定的节点的值。 那么祖先节点就在当前节点左子树 。 如果当前遍历节点的值< 两个节点的值…

赶紧收藏!2024 年最常见 20道 Kafka面试题(四)

上一篇地址&#xff1a;赶紧收藏&#xff01;2024 年最常见 20道 Kafka面试题&#xff08;三&#xff09;-CSDN博客 七、Kafka数据一致性原理是什么&#xff1f; Kafka的数据一致性原理主要依赖于其内部的复制机制、分区策略、领导者与追随者&#xff08;Leader and Follower…

java-成员变量和局部变量

Java中的变量根据其作用域和生命周期可以分为两大类&#xff1a;成员变量&#xff08;Instance Variables&#xff09;和局部变量&#xff08;Local Variables&#xff09;。这两类变量在Java程序中扮演着重要的角色&#xff0c;它们用于存储程序运行时所需的数据。 一、成员变…

贝锐向日葵分组策略:减少重复操作,提升管理效率

面对大数量级的IT设备&#xff0c;如何高效实施管理是运维的关键所在&#xff0c;如何快速准确的对大量的设备按需分组&#xff0c;则是管理精准触达的第一步。 但是&#xff0c;传统的分组方式应付少量设备还可行&#xff0c;设备数量级一旦来到上千台甚至更多时&#xff0c;…

【分红+估值修复】人工智能选股策略》?

今天公告中的部分内容上次去兴业交流的时候跟管理层也聊到了&#xff0c;比如分红、大股东增持、六大新赛道等。 我一直呼吁的管理层增持这次也体现在公告中。 这都体现了上市公司对于维护公司股价和合理估值的重视&#xff0c;对于股东合理投资回报的重视。 对于上市公司而言&…

linux安装docker步骤

步骤1 脚本自动安装 curl -fsSL https://get.docker.com -o get-docker.sh sudo sh get-docker.sh 步骤2 启动Docker服务: sudo systemctl start docker 步骤3 验证Docker是否正确安装并运行一个容器: sudo docker run hello-world 安装正确&#xff0c;则可拉取镜像&am…

C++的std::optional的用法

C++的std::optional的用法 在编程中,处理可能为空的变量或结果是一个常见的挑战。确实,传统的几种方法都有其局限性,可能导致代码的可读性和可维护性降低。如下的方式: 使用特殊值标记: 虽然使用特殊值(如-1、INFINITY、nullptr等)来标记无效或缺失的值很常见,但这种…

在vue3和ant-design-vue的项目中,下拉绑定,显示文字,取值数字

要是以前&#xff0c;用js,jq就很容易实现&#xff0c; 新框架旧写法 <template><a-form><!-- 其他表单项 --><a-form-item label"银行名称"><a-selectv-model:value"state.selectedBankId"placeholder"请选择银行"…

Mongo常用语法(java代码)

1、根据agentId字段分组&#xff0c;并对totalCustomerNum、refundCustomerNum字段 sum求和&#xff0c;同时取别名 Overridepublic List<AgentCountInfoBean> selectCurrentMonthNewResource(Set<String> orderTypeSet, List<String> agentIds,LocalDateTim…

6.4 Go 映射(Map)

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

【vuejs】组件中 data 函数的作用和分析

1. 组件复用性与数据隔离 组件在Vue中是用于复用的&#xff0c;每个组件实例应该拥有自己的独立状态&#xff0c;以避免不同组件实例之间的数据冲突和相互影响。Vue通过将组件的data定义为一个函数来实现这一点。 1.1 组件复用性 组件复用性是指组件可以在多个地方被重复使用…

Java 异常处理详解(如果想知道Java中有关异常处理的知识点,那么只看这一篇就足够了!)

前言&#xff1a;异常处理是 Java 编程中非常重要的一部分&#xff0c;它能够有效地捕获和处理程序运行中的错误&#xff0c;提高代码的健壮性和可靠性。本文将深入探讨 Java 中异常的概念、体系结构、抛出、解决方式以及如何自定义异常&#xff0c;并结合代码案例进行详细解释…

mysql 如果有按照时间范围查询结果

1.前端传2024-06-21 到我们xml sql 文件中默认实际是 2024-06-21 00:00:00 <if test"dto.startTime ! null">and ps.created_at > #{dto.startTime}</if><if test"dto.endTime ! null">and ps.created_at < #{dto.endTime}</if…

Java 面试题:Java 的动态代理是基于什么原理?

编程语言通常有各种不同的分类角度&#xff0c;动态类型和静态类型就是其中一种分类角度&#xff0c;简单区分就是语言类型信息是在运行时检查&#xff0c;还是编译期检查。 与其近似的还有一个对比&#xff0c;就是所谓强类型和弱类型&#xff0c;就是不同类型变量赋值时&…