ComponentKit 학습 프레임 워크

첫째, 특성

세 가지 특성 :

1. 설명 : A.에서 소자 A를 배치하는 방법으로 스택 우는의 세로 또는 가로의 특성, 서브 - 소자의 다이 레이아웃을 우리에게 말해
2. 기능 : 데이터 흐름, 즉 데이터 결정 성분 단방향되도록. 이러한 식 "X + 1"과 같이 "X = 2"의 결과 인 경우 해당 3 고정된다. 데이터가 결정되면, 그 결과는 동일하다. 데이터가 변경되면 대응 될 다시 렌더링 컴포넌트 (이하 기본 구현 재 렌더링하도록 시도 할 것이다).
3. 결합 : 다른 부분이 기록 된 구성 요소의 일부 부분 재사용 할 수 있습니다.

리뷰 : 장점 단방향 데이터 스트림 데이터가 볼을 결정 무엇을, 개발시 발생하는 많은 다양한 상호 작용의 상태를 무시할 수, 그냥 쓰여진 데이터 층 레이아웃 방정식에 초점을 맞출 필요 (기능) 당신이 한번에 모두 그것을 할 수처럼 보인다. 데이터가 지속적으로 변화하기 때문에이 때문에, ComponentKit는 애니메이션을 서면으로 문제가 많이 될 운명.

애니메이션에 관해서는, FB는 응답 :

동적 제스처 기반의 사용자 인터페이스는 ComponentKit에 구현 현재 어려운; AsyncDisplayKit를 사용하는 것이 좋습니다.

 

二, API

1⃣️ CKComponent

구성 요소는 불변이며, 어떤 스레드에서 메인 스레드가 경쟁의 출현을 방지하기 위해 만들 수 있습니다.

두 가지 주요 API :

/** Returns a new component. */

+ (instancetype)newWithView:(const CKComponentViewConfiguration &)view

                       size:(const CKComponentSize &)size;



/** Returns a layout for the component and its children. */

- (CKComponentLayout)layoutThatFits:(CKSizeRange)constrainedSize

                         parentSize:(CGSize)parentSize;

구성 요소, 조판 하나를 만듭니다.

 

2⃣️ 복합 구성 요소

키 : 어떤 자기 정의 구성 요소 상속하지 CKComponent하지만 상속 복합 구성 요소. 간단한 수요를 직접 상속하고 부모 클래스의 메소드를 오버라이드 (override)하지만, 수사 (장식 디자인 모드)에 도달하는 데 사용되어야하지 마십시오.

 

여기에 나쁜 코드 및 권장 코드의 예는 다음과 같습니다

// 不推荐的坏代码：

@implementation HighlightedCardComponent : CardComponent

- (UIColor *)backgroundColor

{

  // This breaks silently if the superclass method is renamed.

  return [UIColor yellowColor];

}

@end

// 推荐代码：

@implementation HighlightedCardComponent : CKCompositeComponent

+ (instancetype)newWithArticle:(CKArticle *)article

{

  return [super newWithComponent:

          [CardComponent

           newWithArticle:article

           backgroundColor:[UIColor yellowColor]]];

}

@end

3⃣️ 보기

클래스 메소드의 요소 만들기

+ (instancetype)newWithView:(const CKComponentViewConfiguration &)view

                       size:(const CKComponentSize &)size;

첫 번째 매개 변수는 CK와 레이어 클래스, CK 두 번째 매개 변수는이 계층 클래스를 구성하는 방법을 알려줍니다 무엇을 알려줍니다.

밤나무의 경우 :

[CKComponent 

 newWithView:{

   [UIImageView class],

   {

     {@selector(setImage:), image},

     {@selector(setContentMode:), @(UIViewContentModeCenter)} // Wrapping into an NSNumber

   }

 }

 size:{image.size.width, image.size.height}];

NULL 값은 밤나무를 들어, 설정할 수 있습니다 :

[CKComponent newWithView:{} size:{}];

// 更为直接

[CKComponent new];

4⃣️ 레이아웃 && 레이아웃 구성 요소

그리고 layoutSubViews UIView의 CK는 layoutThatFits에 해당합니다

이 소개하고 몇 가지 일반적으로 사용되는 레이아웃 구성 요소

• CKStackLayoutComponent 수평 또는 수직 더미의 하위 요소
• CKInsetComponent 철회 및 후퇴 유사한 빅 애플
• 배경으로 아래쪽 CKBackgroundLayoutComponent 팽창 요소
• 마스크로 커버 층의 연장 CKOverlayLayoutComponent 소자
• 공간 CKCenterLayoutComponent 중앙에 정렬
• CKRatioLayoutComponent 비례의 요소가
• CKStaticLayoutComponent 부 요소를 지정할 수있다 오프셋

 

셋째, 응답 체인 && 탭 이벤트 && 제스처 지원

1⃣️ 응답 체인

응답자는 FB 애플이 유사한 좌초하지만이 분리된다.

FB 실질적 응답 체인 :

아들의 구성 요소 -> 아들 componentController (있는 경우) -> 아버지의 구성 요소 -> 아버지 componentController (있는 경우) -> (... 재귀 blabla) -> [다리] CKComponentActionSend으로 -> (공정 : 그보기 부착 찾기 잎의 바닥이보기에 의해 ViewA 노드 찾기 -> (위 ViewA 아버지 ViewB을 통과 -> (... 재귀 blabla)

포인트는 구성 요소의 서브 클래스가 아닌 여기 UIResponder, 그것은 ~ 첫 번째 응답자 될 수 없다

 

이벤트를 클릭 2⃣️

해결이 UIControl보기 클릭 이벤트에서 발생 CKComponentActionAttribute에 SEL 바인드 단순하게되어, UIControlEvent는 외부 트리거를 수신 할 수있을 때 :

@implementation SomeComponent



+ (instancetype)new

{

  return [self newWithView:{

    [UIButton class],

    {CKComponentActionAttribute(@selector(didTapButton))}

  }];

}



- (void)didTapButton

{

  // Aha! The button has been tapped.

}



@end

3⃣️ 제스처

위의 UIControl은 CKComponentTapGestureAttribute 바인딩 탭 제스처 SEL 같은보다 직접적인 바인딩 속성을해야합니다 일반보기를 신청, 코드는 다음과 같다 :

@implementation SomeComponent



+ (instancetype)new

{

  return [self newWithView:{

    [UIView class],

    {CKComponentTapGestureAttribute(@selector(didTapView))}

  }];

}



- (void)didTapView

{

  // The view has been tapped.

}



@end

4⃣️ 구성 요소 작업

반응의 연쇄 반응 요소는 SEL에 있습니다 아래 요약하면, 소자 동작기구는 결합 SEL 통해 뇌에는 없다.

 

넷째, 아이폰 OS 지원 컨테이너 뷰 ( jQuery과 , UICollectionView )

1⃣️ 개요 :

FB 广告하십시오 UICollectionView와 함께 사용하면 ComponentKit 정말 빛난다.

특별히 강조하는 이유는 APP의 특별한 중 하나가 jQuery과 또는 UICollectionView에서 분리 무엇 때문입니다. jQuery과 또는 UICollectionView는 오랫동안 독립적 인 개발 능력을 가지고있다.

 

FB 장점을 옹호 :

1. 자동 재사용
2. CK 자체가 비 UI 번째 스레드에 모든 관련된 계산되도록> - 미끄럼 경험 부드러운
3. 이 모듈은 데이터 소스 CKComponentDataSource 책임이있다.

 

PS : 메인 함수 CKComponentDataSource 모듈 :

1. 입력 데이터와 조작 지시 데이터 소스를 제공
2. 소스 데이터는 변경 후 배경의 레이아웃을 생성
3. jQuery과 출력 가능하거나 제공하는 데이터 소스 UICollectionView

 

CKComponentCollectionViewDataSource

CKComponentCollectionViewDataSource CKComponentDataSource 간단한 패키지로 제공된다.

존재 가치 :

1. 적시에 추가 / 삽입 / 업데이트 "라인", "섹션 UICollectionView 책임 보자."
2. UICollectionView에 "라인"과 "블록"레이아웃 정보를 제공 할 책임.
3. 동기 호출 cellForItemAtIndexPath 말하기 UICollectionView 가시 행 :
4. 구성된 셀을 반환 보장

여기에 UICollectionView와 CKCollectionViewDataSource 성능 데이터는 여전히 하나의 방법입니다.

 

2⃣️ 기준

구성 요소 제공

CKCollectionViewDataSource 각 데이터 요소 (구성 요소) 자기 구성에 대한 책임을 던졌다. 즉, 특정 요소 (부품) 데이터 구조가 요구되는 경우, 클래스 CKComponentProvider 전달에 의해 제공되는 데이터 소스 CKCollectionViewDataSource 방법에 의해 제공 될 것이다이다 :

@interface MyController <CKComponentProvider>

    ...

    @end



    @implementation MyController

    ...

    + (CKComponent *)componentForModel:(MyModel*)model context:(MyContext*)context {

        return [MyComponent newWithModel:model context:context];

    }

    ...

• 데이터를 보장하기 위해 클래스 메소드를 차단하지 않는 것은 불변
• 이 컨텍스트 CKCollectionViewDataSource하게되는 어떠한 불변 객체 일 수있다. 그것은 일반적으로 1)을 입력 장치 (2)) 등의 외부 이미지 - 의존 다운

CKCollectionViewDataSource을 만들 3⃣️ :

- (void)viewDidLoad {

    ...

    self.dataSource = _dataSource = [[CKCollectionViewDataSource alloc] initWithCollectionView:self.collectionView supplementaryViewDataSource:nil componentProvider:[self class] context:context cellConfigurationFunction:nil];

}

추가 4⃣️ / 수정을

모델 indexPath과 결합되어 수행해야합니다 :

- (void)viewDidAppear {

        ...

        CKArrayControllerSections sections;

        CKArrayControllerInputItems items;

        // Don't forget the insertion of section 0

        sections.insert(0);

        items.insert({0,0}, firstModel);

        // You can also use NSIndexPath

        NSIndexPath indexPath = [NSIndexPath indexPathForItem:1 inSection:0];

        items.insert(indexPath, secondModel);

        [self.dataSource enqueueChangeset:{sections, items} constrainedSize:{{0,0}, {50, 50}}];

    }

예를 들어 indexPath (0, 0), 모델이 문자열은 "내가 0 0 선 세그먼트 해요"(0 0 선 세그먼트 및 구성 요소 요소를 바인딩입니다) 함께 바인딩 CKCollectionViewDataSource 말했다.

5⃣️ 조판

코드를 붙여 넣습니다 :

- (CGSize)collectionView:(UICollectionView *)collectionView

                 layout:(UICollectionViewLayout *)collectionViewLayout

                 sizeForItemAtIndexPath:(NSIndexPath *)indexPath {

        return [self.dataSource sizeForItemAtIndexPath:indexPath];

    }

6⃣️ 이벤트 처리

- (void)dataSource:(CKCollectionViewDataSource *)dataSource didSelectItemAtIndexPath:(NSIndexPath *)indexPath{

        MyModel *model = (MyModel *)[self.dataSource modelForItemAtIndexPath:indexPath];

        NSURL *navURL = model.url;

        if (navURL) {

            [[UIApplication sharedApplication] openURL:navURL];

        }
}

V. (데이터 소스)의 설정 변경 API를

여기서 주로 세 가지 카테고리로 나누어 데이터 소스 부와 상호 작용 API를 의미 :

1. 액션 (행 삽입 / 삽입 세그먼트의 삭제 / 갱신 / 삭제 용)
2. 위치 지정 (행 / 세그먼트 위치 지정)
3. 할당 데이터 (성분 던진 사용)

코드를 붙여 넣습니다 :

CKArrayControllerInputItems items;

// Insert an item at index 0 in section 0 and compute the component for the model @"Hello"

items.insert({0, 0}, @"Hello");

// Update the item at index 1 in section 0 and update it with the component computed for the model @"World"

items.update({0, 1}, @"World");

// Delete the item at index 2 in section 0, no need for a model here :)

Items.delete({0, 2});


Sections sections;

sections.insert(0);

sections.insert(2);

sections.insert(3);


[datasource enqueueChangeset:{sections, items}];

그것은 주목해야한다 :

1. 그러한 변화는 결국 (UITableViews 대한 동일)를 UICollectionView에 적용되는 순서를 정의하지 않는 명령 변경 집합에 추가되는 순서.

         즉 : 추가 변경 집합의 순서는 최종 UICollectionView 최종 응용 프로그램의 순서를 변경 나타내지 않습니다.

     sections.insert (0)을 실행하는 초기화 시간을 기억 2;

     3. 모든 변경 세트는 비동기 계산되어 있기 때문에, 발생할 수있는 UI와 동기화되지 않은 데이터의 문제에주의 할 필요가있다

        유일한 기준으로 3.1 항상 데이터 소스, _listOfModels에서 한 번에 다음의 예와 같은 소스에서 모델 데이터를 얻을려고하지 않습니다

@implementation MyAwesomeController {

    CKComponentCollectionViewDataSource *_datasource;

    NSMutableArray *_listOfModels;

}

_datasource 본관, _listOfModels 작은 세 인 예이다.

스틱 :

[datasource objectAtindexPath:indexPath];

        3.2 음주하지처럼 수행 items.insert ({0, _datasource.collectionView numberOfItemsInSection}); 문, 당신은 당신이 삽입 할 위치하지 않을 수 있습니다 위치를 삽입 할 때문이다.