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

相关文章

来自专栏开源FPGA

FPGA设计思想(持续更新)

一、 流水线设计   将原本一个时钟周期完成的较大的组合逻辑通过合理的切割后分由多个时钟周期完成。该部分逻辑运行的时钟频率会有明显对的提升,提高系统的性能用面积...

21810
来自专栏人工智能

Apache Spark 2.0预览:机器学习模型持久性

以上所有应用场景在模型持久性、保存和加载模型的能力方面都更为容易。随着Apache Spark 2.0即将发布,Spark的机器学习库MLlib将在DataFr...

3458
来自专栏walterlv - 吕毅的博客

UWP 扩展/自定义标题栏的方法,一些概念和一些注意事项

发布于 2018-07-27 06:17 更新于 2018-07...

341
来自专栏美团技术团队

使用TensorFlow训练WDL模型性能问题定位与调优

30210
来自专栏杨建荣的学习笔记

关于aio的设置的讨论(r5笔记第69天)

之前在博文中分享过一个ora错误。 ? 对于此,根据日志分析了相关的ora错误,但是从客户的角度还是希望能够提前做些什么,所以aio的设置就成为刻不容缓的一个任...

2647
来自专栏落影的专栏

iOS开发-视图渲染与性能优化

前言 关于iOS的视图渲染流程,以及性能优化的建议。 源于WWDC视频。 我假设你是一个这样的开发者: 了解OpenGL ES; 了解view hierar...

3927
来自专栏用户3030674的专栏

Android 性能优化——之图片的优化

 在Android性能优化中,我们会发现占内存最大的和对性能影响最大的往往是图片资源,其次是控件资源。相对来说,其他的资源的影响会小一点。这里我就先对图片资源的...

571
来自专栏瓜大三哥

VS2详细设计(二)

DVIIN1_CLK为输入视频源的随路时钟,用于检测分辨率的时钟,行分辨率的检测从视频源的数据有效信号DVIIN1_DE的上升沿开始计数,直到DVIIN1_DE...

893
来自专栏祝威廉

如何在Java应用里集成Spark MLlib训练好的模型做预测

昨天媛媛说,你是不是很久没写博客了。我说上一篇1.26号,昨天3.26号,刚好两个月,心中也略微有些愧疚。今天正好有个好朋友问,怎么在Java应用里集成Spar...

813
来自专栏FreeBuf

基于大数据和机器学习的Web异常参数检测系统Demo实现

前 言 如何在网络安全领域利用数据科学解决安全问题一直是一个火热的话题,讨论算法和实现的文章也不少。前段时间看到楚安的文章《数据科学在Web威胁感知中的应...

2428

扫码关注云+社区