在瞬息萬變的技術環境中，跟上所有新框架和工具是一項艱巨的任務。React的易用性為開發人員帶來了急需的解決之道。該可重用的組件，偉大的開發者工具，以及廣泛的生態系統有一些發生反應的最喜愛的功能。React沒有直接操作DOM，而是以虛擬DOM概念的形式引入了有用的抽象級別。 任何框架，庫或編程語言的成功都可以歸因于其功能和社區的活躍狀態。這些因素使React能夠在開發人員中保持其流行度，即使新的框架不斷涌現并在前端開發人員之間爭奪認可。除了這些因素，任何編程語言或框架的一個經常被忽視但高度實用的方面是設計模式的使用，React設法在這一領域交付。在本文中，我們將介紹一些重要的React設計模式。

設計模式的重要性

讓我們首先簡要回顧一下設計模式所扮演的角色。簡而言之，設計模式是軟件開發中常見問題的可重復解決方案。

它們用作根據給定要求構建程序功能的基本模板。

術語“設計模式”不應與“設計系統”相混淆。我們在另一篇文章中討論了更多的設計系統。

設計模式不僅加快了開發過程，而且使代碼更易于閱讀和維護。

設計模式的一些常見示例包括Singleton模式和Gang-of-Four模式。

在軟件開發中，設計模式與兩個常見角色相關聯。

1.為開發人員提供一個通用平臺

設計模式提供了標準術語和已知問題的解決方案。讓我們以上面提到的Singleton模式為例。

此模式假定使用單個對象。實施此模式的開發人員可以輕松地與其他開發人員交流，特定程序遵循單例模式，并且他們將理解這意味著什么。

2.確保最佳做法

經過廣泛的研究和測試，已經創建了設計模式。它們不僅使開發人員可以輕松適應開發環境，還可以確保遵循最佳實踐。

這樣可以減少錯誤，并節省調試和解決問題的時間，這些問題如果已經實施了適當的設計模式，就可以輕松避免。

像其他所有好的編程庫一樣，React大量使用設計模式為開發人員提供了強大的工具。通過正確遵循React原理，開發人員可以產生一些非凡的應用程序。

現在，您已經了解了設計模式。讓我們繼續前進到React.js中可用的一些最廣泛使用的設計模式。

Reactjs的功能

您可以使用Github上可用的create-react-app安裝React 。使用npm，您可以添加所有其他依賴項。

React.js使用了JSX。這是JavaScript的語法擴展。它具有JavaScript的全部功能，并為我們提供了所謂的React“元素”。

盡管使用JSX不是強制性的，但是由于有用的視覺輔助和樣式選項，它是首選方法。它還提供有用的錯誤消息和警告。

React.js遵循的核心哲學是可重用的React組件。您會注意到，可以利用這種基于組件的方法來為Web應用程序構建豐富的用戶界面。

這些React組件本身可以被視為一個小型系統。每個組件都有自己的狀態，輸入和輸出。

組件的輸入采用道具的形式。該組件可能被視為黑匣子。每個都有自己的狀態和生命周期。組件很容易組成。

最終的React應用程序包含高度可維護的代碼。

反應設計模式

React.js中提供了許多設計模式。在這里，我們列出了一些推薦的模式。

無狀態組件

為了理解無狀態功能的概念，讓我們首先看一下狀態的含義。

狀態只是導入到組件中的數據。通常，數據是從數據庫中獲取的。

組件可以有兩種類型，即有狀態和無狀態組件。兩者之間的區別僅僅是狀態的存在與否。

在無狀態組件中，您無法達到 this.state 在里面。

無狀態組件也稱為功能組件或表示組件。在React中，此類組件始終呈現相同的事物，或僅呈現通過道具傳遞給它們的事物。

作為開發人員，您的目標應該是創建無狀態組件，即使在沒有立即需要重用該特定組件的情況下，也是如此。

通常，開發人員在開始編寫代碼后就確定組件是否需要具有狀態，因為該代碼并不總是很清楚。

對于組件的層次結構，最佳實踐是讓父組件保持盡可能多的狀態并制作無狀態的子組件。數據可以通過道具傳遞。

有條件的渲染

條件是任何軟件開發人員中最重要的工具。

在編寫React組件的過程中，經常需要根據狀態呈現某些JSX代碼。這是通過條件渲染實現的。

條件渲染非常有用，因為它允許您根據需要創建不同的組件，然后僅渲染應用程序所需的組件。

例如，條件渲染可用于基于用戶的登錄狀態向用戶顯示不同的消息。該消息將以道具的價值為準 isLoggedIn。

渲染道具

我們討論了如何使用設計模式來解決常見問題。React中提供了渲染道具，以幫助我們解決邏輯重復的問題。

根據 React的官方文檔，渲染道具定義為：

“使用價值為函數的prop在React組件之間共享代碼的技術”。

渲染道具非常方便，因為它們允許我們在不同組件之間共享相同狀態。您可以使用功能道具來確定要呈現的內容，而不是對每個組件內部的邏輯進行硬編碼。

一些使用渲染道具的流行庫包括Formik，React Router和Downshift。

受控組件

Web表單是許多應用程序中的常見要求，而受控組件是React處理表單狀態的答案。

受控組件通過道具獲取狀態。它可以通過諸如onChange之類的回調通知任何更改。

父組件可以通過處理回調并管理自己的狀態來控制它。同時，新值作為道具傳遞給受控組件。

默認情況下，React表單同時支持受控組件和非受控組件。強烈建議您使用受控組件。

以下代碼段顯示了一個受控組件：

<input type = "text" value = {value} onChange = {handleChange} />

反應鉤

掛鉤是一個相對較新的添加，并在React 16.8中引入。

這些功能允許開發人員使用不帶類的React。有很多不同的預構建鉤子。

除了在React中預先構建的鉤子之外，您還可以創建自己的鉤子。這使您可以提取組件邏輯并創建可重用的函數。

鉤子是React的一個受歡迎的補充，開發人員社區非常熱情地感謝這個新加入。

但是，必須記住，當參數是對象，數組或函數時，使用鉤子有時會變得有些棘手。這可能會變得有些混亂。

另一方面，自定義鉤子易于使用且易于使用，它們還為開發人員提供了巨大的好處。

事實證明，React是一個非常受歡迎的庫。該社區是在線上發展最快的開發人員社區之一。想了解更多關于React產品設計的信息，請繼續關注中培偉業。