专栏首页QQ空间开发团队的专栏ComponentKit框架解析之一—初识CK
原创

ComponentKit框架解析之一—初识CK

一、简介

ComponentKit是基于React思想的一个iOS原生UI开发框架。它通过函数式和声明的方式构建UI。目前用于Facebook的News Feed模块。 我们先看一个简单Demo的Component实现

这里,我们描述了一个组件,该组件由三个子组件和Flexbox排版组件构成,竖直从下往上依次排列,子组件间距为50pt。视觉如下

二、思想

开发人员通过创建组件(描述UI的模板)的形式,描述UI应该长成什么样子。复杂UI根据单一职责,拆成若干组件,来描述整体UI的层次结构。将UI具体实现(包括创建,特征实现,排版管理)交由框架的基础服务实现。

由上述设计思想,引出ComponentKit 三大特点

  • 描述性 如上面例子,相对传统的构建UI(手工创建,设置属性,计算布局)。这里我们只描述组件QZStackDemoComponent,竖直从下往上依次排列三个子组件,组件space为50,子组件又描述文本的颜色,字体。具体UI的创建和管理,交给框架基础服务。
  • 函数式 数据的流动是单方向的。数据模型-->创建组件-->根据组件的描述生成更新UI。 当组件的状态更新,将根据对应的状态重新构造一个新组件实例。ComponentKit 会重新比对新旧两个组件的差异,然后更新UI。
  • 组合 复杂的UI实现,通过不同的单一职责的组件组合成复杂组件,然后交由框架实现。小的组件可以进行比较好的复用。如上例中的CKLineComponent,CKLabelComponent。

三、布局方式

使用成熟的描述性的FlexBox布局方式,具体可以参考相应教程。我们只需要按照比较好理解的从左往由,从下往上,剧中,填充满等布局方式给出对应的描述,然后ComponentKit即可通过Flexbox的yoga布局引擎计算布局。

例如实现元素在容器内由下往上排列布局伪代码如下

[CKFlexboxComponent
             newWithView:{}
             size:{}
             style:{
                 .direction = CKFlexboxDirectionVertical,
             }
             children:{
                 {Component0},
                 {Component1},
                 {Component2},
             }]

这比使用传统基于frame的绝对布局和基于约束的AutoLayout布局要更容易理解和维护的多。

四、组件渲染过程

  • 创建Component实例,没有全局变量,线程安全。
  • 异步线程计算排版。
  • 根据组件描述,计算好的排版,创建和更新UI。

这里虽然每次新建或者更新都会重建Component树,但是ComponentKit会计算新旧Component的差异,最小化更新UI。

此外从Component树转换成UI,并不是每个Component都会创建UI元素,有的只是用于排版。如下图,5个Component只生成4个UI元素

ComponentKit内部还会对已有的UI进行复用。如下图,只有Vidoe元素是重新生成,其他元素复用

五、优点

  • 开发人员不需要关心具体的描述实现,UI都是根据模板通过ComponentKit构建,简化了结构和思维的难度,也就意味着更少的 bug。
  • 对于列表(UICollectionView,UITableView)的支持很棒,可以用少量清爽的代码就可以构造出高性能的列表。
  • 复用性高,可以减少开发的业务代码量,Facebook声称用ComponentKit改版News Feeds模块减少了70%代码。
  • 可测试性高。

六、缺点

  • 对于不熟悉ObjC++语法的同学,会有一定学习成本。
  • 把 UI 变成各种 state 之间的演化,这样对于连续的行为不是很好处理。所以对复杂手势,复杂动画支持不友好。
  • ComponentKit 需要写 ObjC++,Swift 不支持 ObjC++ ,和Swift混编比较麻烦。

文章来自:QQ空间开发团队

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • RxJava && Agera 从源码简要分析基本调用流程(2)

    RxJava能够帮助我们对数据流进行灵活的变换,以达到链式结构操作的目的,然而它的强大不止于此。下面我们就来看看它的又一利器,调度器`Scheduler`:就像...

    QQ空间开发团队
  • 一个 ClassLoader 引起的 JNI 链接错误

    Android 插件化工程具有减少方法数和包大小,易于扩展等优势,深得大型工程的青睐,但同时插件化也会引起一些意想不到的麻烦。我们最近在做的插件工程就遇到了一个...

    QQ空间开发团队
  • TPatch动态补丁系统(iOS)

    对于每一个开发,从写Hello World开始,到使用各种语言,可能都会遇到各种BUG。有的BUG能快速解决,比如Web侧的,发个JS或者Html即可。但是在终...

    QQ空间开发团队
  • Rake Gen Deploy Rejected in Octopress

    happy123.me
  • uboot中 make xxx_config 的作用(以make smdk2410_config为例)

    1、创建到目标板相关文件的链接 ln -s asm-arm asm ln -s arch-s3c24x0 asm-arm/arch ln -s proc-arm...

    233333
  • 如何写好一篇季度总结

    很多公司每一季度都会有绩效考核,这个绩效考核其实就是一种季度总结。季度总结的目的是让员工对上一个季度的工作回顾总结,对下一个季度的工作进行规划。季度总结相比年度...

    飞雪无情
  • 圣诞节吃饺子时,怎么给女票解释啥是AI?

    Root 编译整理自 Wired 量子位 出品 | 公众号 QbitAI 上回的美图头像神器,大家有推荐给女票嘛? 把好看的照骗玩了一圈之后,可能她心里想问,感...

    量子位
  • 饿了么的异地多活架构设计是什么样的?

    饿了么技术团队花了1年多的时间,实现了业务的整体异地多活,能够灵活的在多个异地机房之间调度用户,实现了自由扩容和多机房容灾的目标。本文介绍这个项目的整体结构,还...

    肉眼品世界
  • 超越现有科技水平乃至具有划时代意义的高科技产品

    通过配套app“扫描”人体器官和骨骼的T恤 自拍一个就能测试是否患上胰腺癌 纳米颗粒医疗设备如“大内密探”,能在人的身体里自由穿越。 2017已经即将进入尾声,...

    企鹅号小编
  • 在echarts中图例legend和坐标系grid实现左右布局实例

    将图例legend纵向排列(orient: ‘vertical’),宽度给150(width: 150),坐标系grid左侧距离200(left: 200),中...

    砸漏

扫码关注云+社区

领取腾讯云代金券