Yew 框架 (二)子组件的创建和渲染
Yew 子组件的创建和渲染
前一篇 Yew框架(一) 应用初始化过程 我们了解一应用启动的过程,后续我将探索Yew中的一些功能是如何实现的,先来看看 子组件的创建渲染过程。
Yew 支持在组件的视图中嵌套组件,支持给子组件传递属性,下图是测试代码扩展前后的对比:
上面的代码主要是创建VChild对象,不是特别难,但要看懂它做了什么,为什么要这样做,还得先看 Properties 宏对组件的属性做了什么。
Properties 属性
这是我们自定义的Button组件的属性声明:
扩展后:
代码一下变多了。
首先是定义了一个 PropsWrapper,包含两个属性,但属性的类型都为Option类型,并且实现了Default特性,从后面的代码可以看到它就是PropsBuilder 用来存储过程信息的。
定义了两个结构体,都实现PropsBuilderStep特性,定义一个PropsBuilder结构体,有一个泛型参数,参数实现PropsBuilderStep。这是一个状态机在Rust的实现模式,用泛型参数来表示构建器的状态,通过构建器的方法来进行状态迁移,不同的状态可以调用不同的方法。
因为我们只有两个属性,所以 PropsBuilderStep 只有两个状态。PropsBuilderStep_missing_required_prop_text 是初始状态,该状态来可以调用 onclick 和 text 两个方法,来配置 builder,信息存储在 Builder 内部的 PropsWarpper 中。
值得注意的是,Yew 组件的属性是可以不传的,但可不可以不传是由属性的定义者来决定的,而不是调用者来决定的。如果定义一个属性为必传,那么调用者必须传入一个合适的值。如果定义为可不传,调用者可以决定传还是不传。Builder 中自动生成的方法参数上有区别,如果是可以不传的属性,其参数是Option类型。
为Props结构体实现 Properties 属性,只有一个builder方法,用来创建该属性的 Builder,最后由调用该Builder的build方法(该方法只能在 PropsBuilderStep_build 状态下调用,Builder的方法是逆序生成的,最后一个方法调用完成后进入 build 状态),用 PropsWrapper内存储的值来创建一个 Props 对象。
现在接着看 VChild 的创建。
创建 VChild 对象
VChild对象有一个泛型参数,是子组件的类型,这里是 Button。扩展后的创建代码如下:
调用 VChild::new() 方法,传入三个参数,第一个是通过构建器构建的组件属性,第二个是默认的 NodeRef, 第三个是 None。
从代码中看到构建方法的参数都用 VComp 的transform方法进行了转换,这是为何?
Transformer
从注释中得知这个特性功能是用来把属性(调用者传入的属性值)转换了期待的类型(子组件属性对象中对应属性期待的类型)。
VComp 实现多种类型转换,让父组件可以有多种传递属性给子组件的方式,简单说就是提供了“语法糖”。从 FROM 到 TO,表示当子组件的属性期待的是 TO 类型时,父组件可以为其提供 FROM 类型,由 Transformer 自动转换为 TO 类型,赋值给属性。
搜索源码,VComp一共有7个实现:
- 子组件需要什么,父组件就传什么;
- 当子组件需要 T 类型时,可以传入 &T,要求 T 具有 Clone 特性;
- 如果子组件需要的是 String,父组件可以传入 &str;
- 如果子组件需要的是 Option<T> 类型,父组件可以只传入 T 或 &T(要求 T 具有 Clone 特性)类型;
- 如果子组件需要的是 Option<String> 类型,父组件可以传入 &str 或 Option<&str>。
在示例中,我们需要的是一个 String 类型和一个 Option<Callback<()>> 类型,父组件传入的是 &str 和 Callback<()> 类型。经过Transformer 转换成了我们期望的类型。
VChild::new()
这个方法很简单,就是创建一个 VChild 对象。
转化为 VComp
第一张图51行,表示最终会调用VNode::from方法:
内部先调用 VComp::from 方法将 VChild 转换为 VComp,最终转换为 VNode::VComp。
如此看来,VChild 也是一个备胎,它也只是在中途被用一下,在这里就被抛弃了,才创建出来没有两分钟,哈哈哈!重头在 VComp::new()
果然如此,代码长度说明一切!
Generator
用来根据 GeneratorType 渲染子组件视图并挂载到 Dom 的闭包。GeneratorType 有两种情况,一种是创建组件对象并挂载到节点,另一种是之前已经挂载过该组件对象了,只需要更新组件的属性。
闭包内的代码已经很熟悉了(参考 Yew框架(一) 应用初始化过程),第一种情况下,和挂载任意VNode类似,第二种情况下发出一个更新指令到调度器,会先更新组件Scope的状态(期间会调用组件的 change 方法)并重新渲染视图。
创建一个可以创建或更新子组件的闭包,但并未执行,将VComp置为 Unmounted的状态。在渲染视图时,会根据具体情况决定如何来渲染该VComp。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Java中常用七个阻塞队列的总结
Java队列总结 通过前面文章的学习,我们对Java中常用队列做了介绍。本文,咱们来对队列做个总结吧。 首先,我们介绍了现实生活中的实际场景(排队买票等),来告诉我们为什么需要使用队列。 队列是一种先进先出(FIFO)的抽象数据结构,在Java中,队列使用了两种数据类型来实现的,分别是:数组和链表这两种数据结构。 本文主要内容:回顾Java中常用的七个阻塞队列进行总结及阻塞队列中四组AP并进行总结。 本文来源:本文是由凯哥Java(kaigejava)原创发布。 接着,我们介绍了队列的分类,可以分为两类,即阻塞队列和非阻塞队列。 常用的三个非阻塞队列:LinkedList、PriorityQueue和ConcurrentLinkedQueue. (PS:凯哥没有做介绍,在以后的文章中,凯哥将对ConcurrentLinkedQueue进行介绍) 然后我们介绍Java中常用的七个阻塞队列。他们之间类图关系: 我们可以看到,队列是Collection的子类。也即和arrayList类似的。 接着我们就对七个阻塞队列做了详细的介绍。 阻塞队列的七个子类 ArrayBlockingQueue(...
- 下一篇
Apache ZooKeeper 3.6.1 发布,分布式服务框架
Apache ZooKeeper 3.6.1 已发布,这是 3.6 分支的第二个版本,也是一个 bugfix 版本,修复了针对 ZooKeeper 3.5 构建的应用程序有关的一些兼容性问题。从 3.5.7 升级到 3.6.1 像往常一样执行即可,无需特别的附加升级程序。只要不使用 3.5 中不存在的新 API,ZooKeeper 3.6.1 客户端与 3.5 服务器兼容。 新特性 ZOOKEEPER-3689- zkCli/ZooKeeperMain 依赖系统属性来进行 TLS 配置 ZOOKEEPER-3712- 为 NIOServerCnxn 添加 setKeepAlive 支持 改进 ZOOKEEPER-3685- 将JDK Arrays Equals 用于 Jute 编译器 ZOOKEEPER-3686- 将JDK Arrays hashCode 用于 Jute 编译器 ZOOKEEPER-3708- 在 Learner 中,将日志代码移动至 Logging Guard ZOOKEEPER-3741- 修复在 Fedora8 上构建 ZooKeeper 3.5 C 客户端出现...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS7安装Docker,走上虚拟化容器引擎之路
- Windows10,CentOS7,CentOS8安装Nodejs环境
- Red5直播服务器,属于Java语言的直播服务器
- SpringBoot2全家桶,快速入门学习开发网站教程
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- CentOS8编译安装MySQL8.0.19
- CentOS关闭SELinux安全模块