React容器組件和展示組件


 
展示組件
 
- 只關心它們的樣子。
 
- 可能同時包含子級容器組件和展示組件,一般含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。
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM