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 条评论
登录 后参与评论

相关文章

来自专栏落影的专栏

iOS开发-OpenGL ES实践教程(一)

教程 入门教程和进阶教程,介绍的是OpenGL ES基础,学习图形学基本概念,了解OpenGL ES的特性。 实践教程是OpenGL ES在实际开发中的应用,...

34010
来自专栏小工匠技术圈

[Java小工匠]CSS盒子模型-边距合并

  CSS外边距合并,只有上外边距和下外边距才会触发外边距合并,左外边距和右外边距不会。

561
来自专栏菩提树下的杨过

Flash/Flex学习笔记(50):3D线条与填充

3D线条:把上一篇中的3D坐标旋转示例稍做修改,用线把各个小球连接起来即可。 var balls:Array; var numBalls:uint=30; v...

1938
来自专栏腾讯社交用户体验设计

浏览器亚像素渲染与小数位的取舍

962
来自专栏Coco的专栏

【CSS3进阶】酷炫的3D旋转透视

1464
来自专栏Bingo的深度学习杂货店

常见的布局实现

本章主要介绍常见的布局实现,包括: ---- [1] 两列布局 [2] 三列布局 [3] 弹性 (Flex) 布局 ---- [1] 两列布局 子列固定宽度(设...

2896
来自专栏达摩兵的技术空间

css3渐变:linear-gradient

之前的实践中我们了解并熟悉了background-size,以及backgroud-clip,今天我们学习并实践的是线性渐变linear-gradient.

653
来自专栏王二麻子IT技术交流园地

热点图像的制作

其实这个功能主要是用在地图的制作上啊!    你见过“联想”机器上联想公司赠送的“我的办公室”软件的界面吗?在那幅办公室的图片上用鼠标点一下办公桌上的键盘,就...

18910
来自专栏前端小吉米

SVG 动画精髓

1165
来自专栏Nian糕的私人厨房

CSS Flex弹性盒布局

我在上一篇博文CSS 布局_2 Flex弹性盒里,对 Flex 弹性盒有着详细的介绍,这里就不再复述了,书写页面前,我们先来介绍一个之前没提到的知识点——伪类选...

645

扫码关注云+社区