React組件的劃分

1. 組件化思想的應(yīng)用：

  1. 有了組件化的思想，我們?cè)谥蟮拈_發(fā)中就要充分的利用它。
  2. 盡可能的將頁(yè)面拆分成一個(gè)個(gè)小的、可復(fù)用的組件。
  3. 這樣讓我們的代碼更加方便組織和管理，并且擴(kuò)展性也更強(qiáng)。

2. React的組件相對(duì)于Vue更加的靈活和多樣，按照不同的方式可以分成很多類組件：

  1. 根據(jù)組件的定義方式，可以分為：函數(shù)組件(Functional Component )和類組件(Class Component)；
  2. 根據(jù)組件內(nèi)部是否有狀態(tài)需要維護(hù)，可以分成：無狀態(tài)組件(Stateless Component )和有狀態(tài)組件(Stateful Component)；
  3. 根據(jù)組件的不同職責(zé)，可以分成：展示型組件(Presentational Component)和容器型組件(Container Component)；

3.這些概念有很多重疊，但是他們最主要是關(guān)注數(shù)據(jù)邏輯和UI展示的分離：

  1. 函數(shù)組件、無狀態(tài)組件、展示型組件主要關(guān)注UI的展示；
  2. 類組件、有狀態(tài)組件、容器型組件主要關(guān)注數(shù)據(jù)邏輯；
image.png
image.png

如果返回的是數(shù)組的化，react會(huì)對(duì)數(shù)據(jù)進(jìn)行遍歷，渲染成真實(shí)dom，呈現(xiàn)在頁(yè)面上。


image.png
image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容