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

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

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

高級反應(yīng)模式

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

復(fù)合成分

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

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

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

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

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

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

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

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

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

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

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

渲染道具

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

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

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

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

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

受控部件

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

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

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

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

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

狀態(tài)減速機

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

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

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

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

高階組件

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

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

結(jié)論

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