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

相关文章

来自专栏游戏开发那些事

【Unity3d游戏开发】UGUI插件入门之游戏菜单

  ugui是unity4.6开始加入的一个新的ui系统,非常强大,下面我们将通过一系列博客的方式一起来学习一下ugui的使用。本篇博客会介绍如何使用ugui制...

1492
来自专栏Material Design组件

Human Interface Guidelines —— Popovers

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

CSS 字体图标引用

在自己的项目中,我们或多或少的需要插入一些 icon,缺少 UI 设计天赋的我只能去搜寻现有的 icon 了,在这里推荐大家去 Iconfont 阿里巴巴矢量图...

843
来自专栏互联网杂技

20个为前端开发者准备的文档和指南6

1.SitePoint Sass Reference(SitePoint站点的Sass手册) 它是SitePoint自有的项目,是由我们的常驻高手Hugo Gi...

37710
来自专栏Golang语言社区

开发者必备的12个JavaScript库

现在 web 设计是最有趣的了,做好 web 设计不仅要熟练使用 Javascript,css 和 html 等,还要有自己的创意设计。为了方便大家发挥自己的创...

3029
来自专栏Material Design组件

Human Interface Guidelines —— Action Sheets

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

Origami五分钟入门秘籍 - 腾讯ISUX

1292
来自专栏极乐技术社区

微信小程序 wx.request 的封装

自学转行到前端也已近两年,也算是简书和掘金的忠实粉丝,但是以前一直惜字如金(实在是胆子小,水平又低),现在我决定视金钱如粪土(就只是脸皮厚了,水平就那样),好了...

5558
来自专栏数据小魔方

条件格式小技巧——图表集!

今天跟大家分享条件格式的另一个贴心小技巧——图表集! ▽▼▽ 也许大家用的不多,不过这个小技巧之所以要跟大家分享,是因为它采用的迷你小图标的形式,非常细致的刻画...

3215
来自专栏RESTART POiNTER

Web动态图片合成与分享——html2canvas方案实践

在web侧运营活动中,分享传播是重要的一环。普通的h5链接/结构化消息分享已经不能满足产品越来越大的脑洞。在很多场景下,我们需要将个性化内容(如帐号信息,头像,...

4321

扫码关注云+社区