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

設(shè)計(jì)模式的重要性

讓我們首先簡(jiǎn)要回顧一下設(shè)計(jì)模式所扮演的角色。簡(jiǎn)而言之，設(shè)計(jì)模式是軟件開發(fā)中常見問(wèn)題的可重復(fù)解決方案。

它們用作根據(jù)給定要求構(gòu)建程序功能的基本模板。

術(shù)語(yǔ)“設(shè)計(jì)模式”不應(yīng)與“設(shè)計(jì)系統(tǒng)”相混淆。我們?cè)诹硪黄恼轮杏懻摿烁嗟脑O(shè)計(jì)系統(tǒng)。

設(shè)計(jì)模式不僅加快了開發(fā)過(guò)程，而且使代碼更易于閱讀和維護(hù)。

設(shè)計(jì)模式的一些常見示例包括Singleton模式和Gang-of-Four模式。

在軟件開發(fā)中，設(shè)計(jì)模式與兩個(gè)常見角色相關(guān)聯(lián)。

1.為開發(fā)人員提供一個(gè)通用平臺(tái)

設(shè)計(jì)模式提供了標(biāo)準(zhǔn)術(shù)語(yǔ)和已知問(wèn)題的解決方案。讓我們以上面提到的Singleton模式為例。

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

2.確保最佳做法

經(jīng)過(guò)廣泛的研究和測(cè)試，已經(jīng)創(chuàng)建了設(shè)計(jì)模式。它們不僅使開發(fā)人員可以輕松適應(yīng)開發(fā)環(huán)境，還可以確保遵循最佳實(shí)踐。

這樣可以減少錯(cuò)誤，并節(jié)省調(diào)試和解決問(wèn)題的時(shí)間，這些問(wèn)題如果已經(jīng)實(shí)施了適當(dāng)?shù)脑O(shè)計(jì)模式，就可以輕松避免。

像其他所有好的編程庫(kù)一樣，React大量使用設(shè)計(jì)模式為開發(fā)人員提供了強(qiáng)大的工具。通過(guò)正確遵循React原理，開發(fā)人員可以產(chǎn)生一些非凡的應(yīng)用程序。

現(xiàn)在，您已經(jīng)了解了設(shè)計(jì)模式。讓我們繼續(xù)前進(jìn)到React.js中可用的一些最廣泛使用的設(shè)計(jì)模式。

Reactjs的功能

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

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

盡管使用JSX不是強(qiáng)制性的，但是由于有用的視覺(jué)輔助和樣式選項(xiàng)，它是首選方法。它還提供有用的錯(cuò)誤消息和警告。

React.js遵循的核心哲學(xué)是可重用的React組件。您會(huì)注意到，可以利用這種基于組件的方法來(lái)為Web應(yīng)用程序構(gòu)建豐富的用戶界面。

這些React組件本身可以被視為一個(gè)小型系統(tǒng)。每個(gè)組件都有自己的狀態(tài)，輸入和輸出。

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

最終的React應(yīng)用程序包含高度可維護(hù)的代碼。

反應(yīng)設(shè)計(jì)模式

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

無(wú)狀態(tài)組件

為了理解無(wú)狀態(tài)功能的概念，讓我們首先看一下狀態(tài)的含義。

狀態(tài)只是導(dǎo)入到組件中的數(shù)據(jù)。通常，數(shù)據(jù)是從數(shù)據(jù)庫(kù)中獲取的。

組件可以有兩種類型，即有狀態(tài)和無(wú)狀態(tài)組件。兩者之間的區(qū)別僅僅是狀態(tài)的存在與否。

在無(wú)狀態(tài)組件中，您無(wú)法達(dá)到 this.state 在里面。

無(wú)狀態(tài)組件也稱為功能組件或表示組件。在React中，此類組件始終呈現(xiàn)相同的事物，或僅呈現(xiàn)通過(guò)道具傳遞給它們的事物。

作為開發(fā)人員，您的目標(biāo)應(yīng)該是創(chuàng)建無(wú)狀態(tài)組件，即使在沒(méi)有立即需要重用該特定組件的情況下，也是如此。

通常，開發(fā)人員在開始編寫代碼后就確定組件是否需要具有狀態(tài)，因?yàn)樵摯a并不總是很清楚。

對(duì)于組件的層次結(jié)構(gòu)，最佳實(shí)踐是讓父組件保持盡可能多的狀態(tài)并制作無(wú)狀態(tài)的子組件。數(shù)據(jù)可以通過(guò)道具傳遞。

有條件的渲染

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

在編寫React組件的過(guò)程中，經(jīng)常需要根據(jù)狀態(tài)呈現(xiàn)某些JSX代碼。這是通過(guò)條件渲染實(shí)現(xiàn)的。

條件渲染非常有用，因?yàn)樗试S您根據(jù)需要?jiǎng)?chuàng)建不同的組件，然后僅渲染應(yīng)用程序所需的組件。

例如，條件渲染可用于基于用戶的登錄狀態(tài)向用戶顯示不同的消息。該消息將以道具的價(jià)值為準(zhǔn) isLoggedIn。

渲染道具

我們討論了如何使用設(shè)計(jì)模式來(lái)解決常見問(wèn)題。React中提供了渲染道具，以幫助我們解決邏輯重復(fù)的問(wèn)題。

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

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

渲染道具非常方便，因?yàn)樗鼈冊(cè)试S我們?cè)诓煌M件之間共享相同狀態(tài)。您可以使用功能道具來(lái)確定要呈現(xiàn)的內(nèi)容，而不是對(duì)每個(gè)組件內(nèi)部的邏輯進(jìn)行硬編碼。

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

受控組件

Web表單是許多應(yīng)用程序中的常見要求，而受控組件是React處理表單狀態(tài)的答案。

受控組件通過(guò)道具獲取狀態(tài)。它可以通過(guò)諸如onChange之類的回調(diào)通知任何更改。

父組件可以通過(guò)處理回調(diào)并管理自己的狀態(tài)來(lái)控制它。同時(shí)，新值作為道具傳遞給受控組件。

默認(rèn)情況下，React表單同時(shí)支持受控組件和非受控組件。強(qiáng)烈建議您使用受控組件。

以下代碼段顯示了一個(gè)受控組件：

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

反應(yīng)鉤

掛鉤是一個(gè)相對(duì)較新的添加，并在React 16.8中引入。

這些功能允許開發(fā)人員使用不帶類的React。有很多不同的預(yù)構(gòu)建鉤子。

除了在React中預(yù)先構(gòu)建的鉤子之外，您還可以創(chuàng)建自己的鉤子。這使您可以提取組件邏輯并創(chuàng)建可重用的函數(shù)。

鉤子是React的一個(gè)受歡迎的補(bǔ)充，開發(fā)人員社區(qū)非常熱情地感謝這個(gè)新加入。

但是，必須記住，當(dāng)參數(shù)是對(duì)象，數(shù)組或函數(shù)時(shí)，使用鉤子有時(shí)會(huì)變得有些棘手。這可能會(huì)變得有些混亂。

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

事實(shí)證明，React是一個(gè)非常受歡迎的庫(kù)。該社區(qū)是在線上發(fā)展最快的開發(fā)人員社區(qū)之一。想了解更多關(guān)于React產(chǎn)品設(shè)計(jì)的信息，請(qǐng)繼續(xù)關(guān)注中培偉業(yè)。