SimpleViewComponent Size Issue about uicomponent

[lkzhao]

This is expected. In this framework, there are two phases when rendering. One is the layout, second is rendering the views that are on screen.
The component view will first layout the entire component tree, then only create the views that are on screen. This makes it fast just like a UICollectionView where even if you have 100000 cell, it will still only display the ones that user scrolls to.

SimpleViewComponent by default, doesn't initialize a view for it to get its size. If you imagine having 100,000 of these in your feed, if each SimpleViewComponent initialize a view to retrieve its size, it is going to take a lot of memory and be very slow to initialize. So normally you will have to supply a size via the .size() modifier, or do your own size calculation by writing your own component.

SimpleViewComponent<UIButton>().update {
    $0.setTitle("button", for: .normal)
    $0.setTitleColor(.systemBlue, for: .normal)
}.backgroundColor(.brown).size(CGSize(width:100, height:44))

However, if you don't update your feed frequently, or if you only have a few of these views. You can directly create a view and pass it into the SimpleViewComponent like so:

let button = UIButton()
button.setTitle("button", for: .normal)
button.setTitleColor(.systemBlue, for: .normal)
SimpleViewComponent(view: button)

This way, the SimpleViewComponent has a view to retrieve the size from, and you will get the correct layout.

And did you know? all UIView are compatible to be used as a ViewComponent.
So what I do normally if I have a few views that I would like to display in a componentView is the following:

class ViewController: UIViewController {
  let button = UIButton()
  // ...
  func viewDidLoad() {
    super.viewDidLoad()
    button.setTitle("button", for: .normal)
    button.setTitleColor(.systemBlue, for: .normal)
    componentView.component = VStack {
      // ...
      button // <- notice that I can directly put the button inside any layout component, this will turn it into a SimpleViewComponent automatically
    }
}

[lkzhao]

If you are going to build a scrolling feed of these cells, you should create your own component for your cells. You can check out the Card examples or the Text or Image component to see how the size is calculated during a layout cycle if you plan to implement your own Component.

[wwdc14yh]

This is awesome and very helpful to me