Facebook Componentkit 概况了解

一、概况
- 1.1Components 三大特性:
  - 声明式 Declarative:
  - 函数式Functional:
  - 组合式Composable:
- 1.2、Components 优缺点
  - Strengths 优点
  - Considerations 可改进的地方
二、相关API
- 2.1 Component类（避免直接继承CKComponent类）
- 2.2 Composite Components（复合组件，可以直接继承此类）
- 2.3 Views（视图）
- 2.4 Layout（布局）
  - Layout Components
- 2.5 Responder Chain（响应者链）
  - Tap点击的实现
  - 手势的实现
- 2.6 Actions（子component和父component通信）
  - Component Actions是什么？
  - 如何传递Action
- 2.7 State（对应React的State）
- 2.8 Scopes（用来作为component的id）
  - 定义 Scope

官网文档

[TOC]

一、概况

Components are immutable objects that specify how to configure views.
A simple analogy is to think of a component as a stencil: 
a fixed description that can be used to paint a view but that is not a view itself.
A component is often composed of other components, 
building up a component hierarchy that describes a user interface.

理解：
Component（组件）是不可变的对象，用来告诉我们如何初始化view。
Component（组件）是一个固定的描述，这个描述可以用来打印view。
简单恰当的比喻：
Component（组件）相当于stencil（镂空板）,是一个固定的图案，用来打印view，但不是view。

Component（组件）相当于镂空板

镂空版印刷（stencil printing），指在木片、纸板、金属或塑料等片材上刻划出图文，并挖空制成镂空版，通过刷涂或喷涂方法使油墨透过通孔附着于承印物上。

也可以理解成印章

Component（组件）相当于印章
view相当于印章盖出来的图案

一个组件通常由其他组件组合而成，组件的层级结构可以用来描述用户界面。

1.1Components 三大特性:

demo代码

@implementation ArticleComponent

+ (instancetype)newWithArticle:(ArticleModel *)article
{
  return [super newWithComponent:
          [CKFlexboxComponent
           newWithView:{}
           size:{}
           style:{
             .direction = CKFlexboxDirectionVertical,
           }
           children:{
             {[HeaderComponent newWithArticle:article]},
             {[MessageComponent newWithMessage:article.message]},
             {[FooterComponent newWithFooter:article.footer]},
           }];
}

@end

声明式 Declarative:

Instead of implementing -sizeThatFits: and -layoutSubviews and positioning subviews manually, you declare the subcomponents of your component (here, we say “stack them vertically”).
相比原生设置UI需要手动设置位置，声明式的特性只需要我们做一个声明描述即可，比如垂直排列元素。
非常方便。

函数式Functional:

Data flows in one direction.
Methods take data models and return totally immutable components.
数据单向流动，数据流向UI
根据Data获取对应的不可变的Components组件

When state changes, ComponentKit re-renders from the root and reconciles the two component trees from the top with as few changes to the view hierarchy as possible.

状态改变时，ComponentKit会重新绘制。这时候有oldState和newState，会仔细核对两个组件树(Component tree),从root node到top node 尽量使用最少的重绘来更新view层级结构。

组合式Composable:

Here FooterComponent is used in an article, but it could be reused for other UI with a similar footer.
Reusing it is a one-liner.
CKFlexboxComponent is inspired by the flexbox model of the web and can easily be used to implement many layouts.
比如上文demo中的FooterComponent可以复用在别的组件里。
CKFlexboxComponent是类似于flexbox的Component。

1.2、Components 优缺点

Strengths 优点

Simple and Declarative 简单和声明式: 比较类似 React.
Scroll Performance 滚动流畅: 布局都在后台线程，保证了主线程的流畅度。
View Recycling 视图复用
Composability 组合式使用:Component可以组合起来使用

Considerations 可改进的地方

列表式的界面支持比较好，不是列表式的界面支持不够理想。
ComponentKit is fully native and compiled. 全Native，不支持跨端。
ComponentKit 基于 Objective-C++. 不支持Swift，有学习成本。

二、相关API

2.1 Component类（避免直接继承CKComponent类）

@interface CKComponent : NSObject

/** Returns a new component. */
+ (instancetype)newWithView:(const CKComponentViewConfiguration &)view
                       size:(const CKComponentSize &)size;

@end

component 是不可变的，没有addSubcomponent方法。
component可以在任意线程创建，因此所有的布局计算可以避免阻塞主线程。The Objective-C 使用 +newWith... 便利构造器保持代码可读

2.2 Composite Components（复合组件，可以直接继承此类）

避免直接继承 CKComponent 类。
可以直接继承CKCompositeComponent.
composite component包含了另一个component，对外隐藏了它的实现。
比如需要做一个分享按钮，可以制作一个ShareButtonComponent 复合组件，里面包含CKButtonComponent组件

@implementation ShareButtonComponent

+ (instancetype)newWithArticle:(ArticleModel *)article
{
  return [super newWithComponent:
          [CKButtonComponent
           newWithAction:@selector(shareTapped)
           options:{...}]];
}

- (void)shareTapped
{
  // Share the article
}

@end

2.3 Views（视图）

使用 newWithView:size: class method:来创建component组件

+ (instancetype)newWithView:(const CKComponentViewConfiguration &)view
                       size:(const CKComponentSize &)size;

关于CKComponentViewConfiguration

struct CKComponentViewConfiguration {
  CKComponentViewClass viewClass;//使用[UIImageView class] 或者 [UIButton class]
  std::unordered_map attributes;//属性map
};

使用newWithView

[CKComponent 
 newWithView:{
   [UIImageView class],
   {
     {@selector(setImage:), image},
     {@selector(setContentMode:), @(UIViewContentModeCenter)} // Wrapping into an NSNumber
   }
 }
 size:{image.size.width, image.size.height}];

ComponentKit 会做如下的事情:

1.当component被挂载时候自动创建或复用 UIImageView
2.自动调用 setImage: and setContentMode: 使用给定的值
3.如果更新view tree时候value没有变化就跳过不调用setImage: or setContentMode:方法

2.4 Layout（布局）

UIView 实例在属性里面存储 position 和 size 信息。
当约束条件变化的时候Core Animation 通过调用layoutSubviews来更新这些属性。

CKComponent 实例并不存储position 和 size 信息。
ComponentKit 使用给定的约束，调用 layoutThatFits: 方法，
component 会返回 CKComponentLayout,包含自身的size和children component的size和position信息

struct CKComponentLayout {
  CKComponent *component;
  CGSize size;
  std::vector children;
};

struct CKComponentLayoutChild {
  CGPoint position;
  CKComponentLayout layout;
};

Layout Components

CKFlexboxComponent 基于简化版的 CSS flexbox.
允许垂直或者水平排列元素，各种对齐等。
CKInsetComponent 应用内边距的布局
CKBackgroundLayoutComponent 背景布局
CKOverlayLayoutComponent 覆盖布局
CKCenterLayoutComponent 中心布局
CKRatioLayoutComponent 比例布局
CKStaticLayoutComponent 固定布局

2.5 Responder Chain（响应者链）

响应者链

component的下一级响应者是它自己的 controller（如果有的话）
component的 controller 的下一级响应者是component的父级component.
如果 component 没有controller, 它的下一级响应者是自己的父级component
根 component的下一级响应者是它所被添加的view
一般来说 view的下一级响应者是它的superview.
最终,view会找到和component层级结构一样的根view
如果要使用CKComponentActionSend，可以手动桥接view responder chain 和 the component responder chain。

注意component 并不是UIResponder的子类，不能成为 first responder.
但是component也是实现了nextResponder 和 targetForAction:withSender:方法.

Tap点击的实现

使用CKComponentActionAttribute在 UIControl 上实现Tap点击

@implementation SomeComponent

+ (instancetype)new
{
  return [self newWithView:{
    [UIButton class],
    {CKComponentActionAttribute(@selector(didTapButton))}
  }];
}

- (void)didTapButton
{
  // Aha! The button has been tapped.
}

@end

手势的实现

使用CKComponentTapGestureAttribute可以在任何UIView上实现

@implementation SomeComponent

+ (instancetype)new
{
  return [self newWithView:{
    [UIView class],
    {CKComponentTapGestureAttribute(@selector(didTapView))}
  }];
}

- (void)didTapView
{
  // The view has been tapped.
}

@end

2.6 Actions（子component和父component通信）

一般来说子components 需要和.父component进行通信。
比如一个按钮component需要告诉父component它被点击了。
Component actions 可以实现这个目的。

Component Actions是什么？

CKAction 是 Objective-C++ 类，包含一个 SEL (Objective-C的方法名), 和一个 target.
CKAction 允许你指定参数传给指定方法。
CKAction的 send方法可以带着发送者component和参数传递给receiver

由于历史原因，CKComponentActionSend可带action，sender，和一个可选对象。
循着响应者链，找到一个响应者响应对应的方法，把参数传给它。

CKComponentActionSend 只能在主线程被调用！

@implementation SampleComponent
+ (instancetype)new
{
  CKComponentScope scope(self);
  return [super newWithComponent:
          [CKButtonComponent
           newWithAction:{scope, @selector(someAction:event:)}
           options:{}]];
}

- (void)someAction:(CKButtonComponent *)sender event:(UIEvent *)event
{
  // Do something
}
@end

@implementation SampleOtherComponentThatDoesntCareAboutEvents
+ (instancetype)new
{
  CKComponentScope scope(self);
  return [super newWithComponent:
          [CKButtonComponent
           newWithAction:{scope, @selector(someAction:)}
           options:{}]];
}

- (void)someAction:(CKButtonComponent *)sender
{
  // Do something
}
@end

@implementation SampleOtherComponentThatDoesntCareAboutAnyParameters
+ (instancetype)new
{
  CKComponentScope scope(self);
  return [super newWithComponent:
          [CKButtonComponent
           newWithAction:{scope, @selector(someAction)}
           options:{}]];
}

- (void)someAction
{
  // We don't take any arguments in this example.
}
@end

@interface SampleControllerDelegatingComponentController : CKComponentController
/** Component actions may be implemented either on the component, or the controller for that component. */
- (void)someAction;
@end

@implementation SampleControllerDelegatingComponent
+ (instancetype)new
{
  CKComponentScope scope(self);
  return [super newWithComponent:
          [CKButtonComponent
           newWithAction:{scope, @selector(someAction)}
           options:{}]];
}
@end

@implementation SampleControllerDelegatingComponentController
- (void)someAction
{
  // Do something
}
@end

如何传递Action

简单规则: 方法应该在它们被引用的地方在一个文件中
下面的例子父component和子component耦合比较厉害，如果别的component想要使用子component，或者父类改了方法名，运行的时候就会崩溃。

//有隐患
@implementation ParentComponent
+ (instancetype)new
{
  return [super newWithComponent:[ChildComponent new]];
}
- (void)someAction:(CKComponent *)sender
{
  // Do something
}
@end

@implementation ChildComponent
+ (instancetype)new
{
  return [super newWithComponent:
          [CKButtonComponent
           newWithAction:@selector(someAction:)]];
}
@end

从父component传递方法到子component，子component只知道需要一个action，耦合比较小。

//正确的例子
@implementation ParentComponent
+ (instancetype)new
{
  CKComponentScope scope(self);

  return [super newWithComponent:
          [ChildComponent
           newWithAction:{scope, @selector(someAction:)}]];
}

- (void)someAction:(CKComponent *)sender
{
  // Do something
}
@end

@implementation ChildComponent
+ (instancetype)newWithAction:(CKTypedComponentAction<>)action
{
  return [super newWithComponent:
          [CKButtonComponent
           newWithAction:action]];
}
@end

2.7 State（对应React的State）

ComponentKit是受 React启发的.
React components 拥有下面两个元素

props: 从parent传过来。在ComponentKit中类似+new方法传给子component的参数
state: 父component不用关心，这是子component内部实现。
在 Thinking in React 有相关的讨论。

CKComponent 的 state.

@interface CKComponent
- (void)updateState:(id (^)(id))updateBlock mode:(CKUpdateMode)mode;
@end

继续阅读... 展开的demo

#import "CKComponentSubclass.h" // import to expose updateState:
@implementation MessageComponent

+ (id)initialState
{
  return @NO;
}

+ (instancetype)newWithMessage:(NSAttributedString *)message
{
  CKComponentScope scope(self);
  NSNumber *state = scope.state();
  return [super newWithComponent:
          [CKTextComponent
           newWithAttributes:{
             .attributedString = message,
             .maximumNumberOfLines = [state boolValue] ? 0 : 5,
           }
           viewAttributes:{}
           accessibilityContext:{}]];
}

- (void)didTapContinueReading
{
  [self updateState:^(id oldState){ return @YES; } mode:CKUpdateModeAsynchronous];
}

@end

2.8 Scopes（用来作为component的id）

如下图，如果item没有id 就没法进行区分

无法区分

如下图，每个item都有自己的id，这样可以具体区分

有了id可以区分

Scopes给component提供了一个永久的身份标识符。不管component被创建过多少次，scope都是一样的。

component 有 state，那么必须要定义一个 scope
component 有component controller，那么必须要定义一个 scope
component的子component有 state 或者 component controllers 那么必须要定义一个 scope

定义 Scope

使用 CKComponentScope在 +new方法中

@implementation ListItemComponent

+ (instancetype)newWithListItem:(ListItem *)listItem
{
  // Defines a scope that is uniquely identified by the component's class (i.e. ListItemComponent) and the provided identifier.
  CKComponentScope scope(self, listItem.uniqueID);
  const auto c = /* ... */;
  return [super newWithComponent:c];
}

@end

component 没有 model object

@implementation ListComponent

+ (instancetype)newWithList:(List *)list
{
  // Defines a scope that is uniquely identified by the component's class (i.e. ListComponent).
  CKComponentScope scope(self);
  const auto c = /* ... */;
  return [super newWithComponent:c];
}

@end