1.聰明組件和傻瓜組件---react應(yīng)用中最簡(jiǎn)單常見(jiàn)的組件模式
也叫有狀態(tài)和無(wú)狀態(tài)組件，本質(zhì)是1個(gè)功能分配到2個(gè)組件中，形成父子關(guān)系，外層的父組件負(fù)責(zé)管理數(shù)據(jù)狀態(tài)，內(nèi)層子組件只負(fù)責(zé)展示
“責(zé)任分離”就是讓一個(gè)模塊責(zé)任盡量少，一個(gè)模塊專(zhuān)注于一個(gè)功能，這樣更有利于代碼維護(hù)，react其實(shí)就是這樣的公式：
UI? =? f（data）
react做界面無(wú)外乎就是獲得驅(qū)動(dòng)界面的數(shù)據(jù)，然后利用數(shù)據(jù)來(lái)渲染界面。一個(gè)組件盡管可以搞定，但是，把獲取和管理數(shù)據(jù)這件事和界面渲染分開(kāi)。做法就是獲取和管理數(shù)據(jù)的邏輯放父組件-----聰明組件，渲染界面邏輯放子組件-----傻瓜組件
此做法可靈活修改數(shù)據(jù)狀態(tài)管理方式，比如Redux換為Mobx,這種模式分割的組件只需修改聰明組件，傻瓜保持原樣
傻瓜邏輯超簡(jiǎn)單，界面完全有props決定，因?yàn)椴幌朊看味贾匦落秩荆詴?huì)重新與以前的比較有無(wú)改變，? ? PureComponent和shouldComponentUpdate對(duì)props只是做的淺層比較，如果props為深層對(duì)象，易出問(wèn)題。比如，2次渲染傳入的都是同一個(gè)props對(duì)象，但對(duì)象里某個(gè)屬性的值不同，PureComponent眼里沒(méi)有變化，不重新渲染，，而且他的渲染必須實(shí)現(xiàn)為class
React v16.6.0之后的，有了新功能React.memo（第二個(gè)參數(shù)無(wú)法針對(duì)states），既利用了shouldComponentUpdate，又不要求寫(xiě)一個(gè)class，這在逐漸向完全函數(shù)式編程前進(jìn)
外部傳的值變化，必定引起這個(gè)組件的重新渲染，就算組件沒(méi)使用這個(gè)值
2.高階組件---實(shí)為一個(gè)特殊的函數(shù)，接受至少一個(gè)React組件為參數(shù)，并且能夠返回一個(gè)全新的React組件作為結(jié)果，這個(gè)新產(chǎn)生的React組件是對(duì)作為參數(shù)的組件的包裝，賦予新組件一些增強(qiáng)的“能力”
React里組件為第一公民，當(dāng)某些功能多個(gè)組件通用，“不要重復(fù)自己”原則就想把共用邏輯提取為一個(gè)React組件。但是，有些情況下，這些共用邏輯沒(méi)法成為獨(dú)立組件，也就是他們單獨(dú)無(wú)法使用，只是對(duì)其他組件的功能加強(qiáng)
函數(shù) withDoNothing 是個(gè)高階組件，命名一般帶with前綴，高階組件的基本套路如下：
1.高階組件不能修改作為參數(shù)的組件，高階組件必須是一個(gè)純函數(shù)，不應(yīng)該有任何副作用
2.高階組件返回結(jié)果必須是一個(gè)新的React組件，這個(gè)新的組件jsx部分肯定會(huì)包含作為參數(shù)的組件
3.高階組件一般需要把傳給自己的props轉(zhuǎn)手傳遞給作為參數(shù)的組件
高階組件的高級(jí)用法-----只需返回一個(gè)react組件，但傳入的可以多個(gè)，不局限于1個(gè)
鏈?zhǔn)秸{(diào)用是高階組件的巧妙之處----避免中間變量挨個(gè)包裝，直接連續(xù)調(diào)用高階組件
高階組件本身是1個(gè)純函數(shù)，純函數(shù)是可以組合使用的，所以，可以把多個(gè)高階組件組合為一個(gè)高階組件
