[react] 展示組件和容器組件有什么區(qū)別？

展示組件（Presentational Component）
關(guān)注頁面的展示效果（外觀）
內(nèi)部可以包含展示組件和容器組件，通常會(huì)包含一些自己的DOM標(biāo)記和樣式(style)
通常允許通過this.props.children方式來包含其他組件。
對(duì)應(yīng)用程序的其他部分沒有依賴關(guān)系，例如Flux操作或store。
不用關(guān)心數(shù)據(jù)是怎么加載和變動(dòng)的。
只能通過props的方式接收數(shù)據(jù)和進(jìn)行回調(diào)(callback)操作。
很少擁有自己的狀態(tài)，即使有也是用于展示UI狀態(tài)的。
會(huì)被寫成函數(shù)式組件除非該組件需要自己的狀態(tài)，生命周期或者做一些性能優(yōu)化。
Example：Page，Header,Sidebar,UserInfo,List

容器組件（Container Component）
關(guān)注應(yīng)用的是如何工作的
內(nèi)部可以包含容器組件和展示組件，但通常沒有任何自己的DOM標(biāo)記，除了一些包裝divs，并且從不具有任何樣式。
提供數(shù)據(jù)和行為給其他的展示組件或容器組件。
調(diào)用Flux操作并將它們作為回調(diào)函數(shù)提供給展示組件。
往往是有狀態(tài)的，因?yàn)樗鼈儍A向于作為數(shù)據(jù)源
通常使用高階組件生成，例如React Redux的connect（），Relay的createContainer（）或Flux Utils的Container.create（），而不是手工編寫。
Example：UserPage, FollowersSidebar, StoryContainer, FollowedUserList

個(gè)人簡介

我是歌謠，歡迎和大家一起交流前后端知識(shí)。放棄很容易，
但堅(jiān)持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關(guān)前端面試題

總結(jié)

以上是生活随笔為你收集整理的[react] 展示组件和容器组件有什么区别？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。