我愛上了ReactJS，開始學(xué)習(xí)我能決定的東西。我開始看課程，寫代碼，讀文章。之后，我決定開始寫我從ReactJS社區(qū)和專家那里學(xué)到的東西。

React編程模式用于簡(jiǎn)化大型React應(yīng)用程序并使您的團(tuán)隊(duì)體驗(yàn)更輕松，這有助于您的團(tuán)隊(duì)構(gòu)建單獨(dú)的組件并在它們之間共享邏輯。

閱讀本文后，您將了解更多有關(guān)現(xiàn)代React模式的信息，如復(fù)合組件、呈現(xiàn)道具、道具獲取程序、控制器道具、上下文API。

高級(jí)反應(yīng)模式

軟件模式使您能夠使代碼更加可重用、通用。

復(fù)合成分

復(fù)合組件是一種在彼此內(nèi)部寫入元素的方法，但主要條件是內(nèi)部組件沒有它們的主父級(jí)就不能工作。

我們還可以將其定義為共享同一狀態(tài)共享同一父級(jí)和共享父級(jí)狀態(tài)。

我最喜歡的一個(gè)例子是tabs組件，當(dāng)我開始學(xué)習(xí)ReactJS時(shí)，我已經(jīng)構(gòu)建了它。

如果您需要將內(nèi)容從父容器共享給它的子容器，則可以使用React.Children提供的實(shí)用程序來處理this.props.children。

但是，這種解決方案對(duì)于復(fù)合組件不夠靈活，因?yàn)楫?dāng)您更改零件的順序或?qū)⑺鼈儼b到另一個(gè)元素中時(shí)，它們現(xiàn)在將無法訪問道具，因?yàn)橛成浜瘮?shù)循環(huán)通過父組件中的第一級(jí)。

為了解決上述問題，我們需要另一種方法來共享組件之間的狀態(tài)，如果插件的用戶更改了表示元素的方式，那么就不會(huì)中斷。我們可以使用ContextAPI在組件之間共享狀態(tài)。

使用上下文API的第一個(gè)元素稱為Provider，Provider元素是共享相同狀態(tài)的元素的包裝父元素。然后我們有了使用者，提供者內(nèi)的每個(gè)組件都可以使用它從提供者獲取或檢索值。

 對(duì)于以上代碼，這樣設(shè)置對(duì)象不是最佳做法，因?yàn)槊看握{(diào)用render方法時(shí)，它都會(huì)創(chuàng)建一個(gè)新引用和新對(duì)象。所以人們說要把這些東西放到組件狀態(tài)甚至回調(diào)中，以避免每次無需重新呈現(xiàn)。

請(qǐng)注意，consumer子級(jí)是傳遞給consumer的函數(shù)，consumer將狀態(tài)提供給子級(jí)。

復(fù)合組件很有用，當(dāng)我的用戶為組件時(shí)，不需要關(guān)心實(shí)現(xiàn)細(xì)節(jié)。例如，我們?cè)诟附M件中檢查選項(xiàng)卡是否單擊。

我建議您自己嘗試一下，以了解更多有關(guān)如何在組件之間共享內(nèi)容的信息，下面是一個(gè)簡(jiǎn)單的項(xiàng)目。嘗試讓它使用上下文API而不是反應(yīng)。孩子們.

渲染道具

這種技術(shù)使用道具，這就是為什么它被稱為渲染道具。傳遞一個(gè)函數(shù)作為一個(gè)render方法，該方法返回ReactJS元素并用于呈現(xiàn)事物。

慣例是把它命名為渲染道具，但沒必要這樣稱呼它，有些人還用兒童道具作為函數(shù)。但是，作為函數(shù)傳遞的任何屬性都可以從另一個(gè)地方渲染對(duì)象，稱為“渲染道具”。

我的意思是道具是你的組件輸入。讓我在下一段代碼中向您展示一個(gè)示例。

查看組件的末尾。它是一個(gè)子組件，但不是將其用作{this.props.children}，而是將其用作函數(shù)，并傳遞給我們所需的參數(shù)，以使組件的用戶為我們返回所需的組件。查看下面的代碼如何使用此組件。

不錯(cuò)吧？你自己試試，把你的一個(gè)道具改成一個(gè)函數(shù)，然后把你需要移動(dòng)的東西傳給它。這個(gè)技巧允許您創(chuàng)建共享內(nèi)容，甚至不需要使用上下文API。

受控部件

控制是指你是一個(gè)誰負(fù)責(zé)改變自己的東西的狀態(tài)。其中一個(gè)著名的例子是你的表單輸入，當(dāng)你傳遞一個(gè)道具值給你的“輸入”時(shí)，事情就變了。

現(xiàn)在，當(dāng)用戶開始鍵入時(shí)，必須為輸入傳遞onChange事件，以確保在您的狀態(tài)下更改它。如果您在不更改狀態(tài)的情況下提供值屬性，則用戶輸入將永遠(yuǎn)不會(huì)反映他輸入的實(shí)際文本。

這就是為什么它被稱為受控的，你可以控制更改并在另一個(gè)時(shí)間傳遞給你的輸入。

給出了一個(gè)很好的例子，比如當(dāng)用戶點(diǎn)擊某個(gè)東西超過四次時(shí)，我需要給他一條消息，阻止他打字，如果我不是編寫組件的人，這種情況就不會(huì)發(fā)生。

對(duì)于我的標(biāo)簽組件，我已經(jīng)改變了活動(dòng)標(biāo)簽現(xiàn)在是從道具，我不是誰控制它。我觸發(fā)一個(gè)事件，用戶單擊我的組件，而您自己更改活動(dòng)選項(xiàng)卡。

狀態(tài)減速機(jī)

reducer是一個(gè)簡(jiǎn)單的函數(shù)，它接受輸入并返回輸出，而不改變應(yīng)用程序的狀態(tài)。這種類型的服務(wù)稱為純函數(shù)。

用于為組件提供生成新狀態(tài)的函數(shù)的狀態(tài)縮減器取決于從縮減器返回的值。例如，在“我的選項(xiàng)卡”組件上，用戶將名為stateReducer的prop作為函數(shù)傳遞，而在“選項(xiàng)卡”組件中，如果狀態(tài)在“選項(xiàng)卡”組件中發(fā)生任何更改，我們將調(diào)用此函數(shù)，并將其指定為新狀態(tài)。

這種模式與通過道具控制組件是一樣的，但是這次組件所有者向您發(fā)送舊狀態(tài)和更改，并讓您決定更改內(nèi)部狀態(tài)。

最后一段代碼用state reducer返回的值觸發(fā)狀態(tài)。你可以說這有點(diǎn)像redux中使用的減速機(jī)。

高階組件

高階組件是一個(gè)函數(shù)，它接受ReactJS組件并在其上執(zhí)行一些邏輯，然后返回新的應(yīng)用程序組件。這個(gè)模式在ReactJS的大多數(shù)庫中都使用。例如，redux使用它將道具從存儲(chǔ)頂層合并到任何組件。

另外，我在materialui中使用了它，將類對(duì)象傳遞給組件，或者擴(kuò)展其應(yīng)用程序組件的樣式。這種使用名為withStyle HOC的材質(zhì)UI編寫應(yīng)用程序組件的方法。

結(jié)論

過了一段時(shí)間，我發(fā)現(xiàn)寫下你所學(xué)到的東西會(huì)讓你的信息更強(qiáng)大。嘗試一下這些模式，它們使您的組件變得獨(dú)特，特別是如果您是喜歡開放源碼社區(qū)的人之一的話。這些模式使您的組件更加可重用，有更多的人使用它。