展示組件
- 只關心它們的樣子。
- 可能同時包含子級容器組件和展示組件,一般含DOM標簽和自定的樣式。
- 通常用this.props.children來包含其他組件
- 不依賴app其它組件,比如flux的actions和stores
- 不會定義數據如何讀取,如何改變
- 只通過this.props接受數據和回調函數
- 很少有自己的狀態變量,即使有,也是UI的狀態變量,比如toggleMenuOpen,InputFocus
- 一般是函數級組件,除非它們需要狀態,lifecycle hooks,優化處理。
容器組件
- 只關心它們的運作方式。
- 可能同時包含子級容器組件和展示組件,但大都不含DOM標簽,而含他們自己所用的wrapping div,從不用自己的樣式。
- 為展示組件或其他組件提供數據和方法。
- 調用Flux的actions,並且將其作為展示組件的回調函數。
- 維持許多狀態變量,通常充當一個數據源。
- 通常由高階組件生成,比如Redux里的connect(),Relay里的createContainer(),Flux Utils里的Container.create(),而非手工寫出(譯者:可能在meteor中數據是例外吧)
- 例子有UserPage, FollowersSidebar, StoryContainer, FollowedUserList。