React作為使用最廣泛Web前端開發(fā)之一，在Web開發(fā)領(lǐng)域越來成熟和穩(wěn)固。其新版本發(fā)布的Hook API/concept使得組件更加便捷易用。雖然如此，React開發(fā)中仍然有很多的陷阱值得每一位React擁躉關(guān)注。

陷阱一：使用函數(shù)式組件

在React中可以使用兩種方法編組件函數(shù)式和類組件。函數(shù)式組件方式比較直觀，所以被廣為采用，但是函數(shù)式組件卻存在問題：不支持Hook函數(shù)和沒有內(nèi)部state狀態(tài)屬性。

錯(cuò)誤代碼示例：

function Chongchong(props) {

return

Hello, {props.name}

;

}

問題分析

函數(shù)式組件，不支持Hook函數(shù)，比如在組件加載后去請求API獲取數(shù)據(jù)就不可能。

解決方案

使用類組件，可以獲得Hook和狀態(tài)的加權(quán)。

陷阱二：錯(cuò)誤的使用useState

在React中最重要的理念是對狀態(tài)的處理，可以通過其控制整個(gè)數(shù)據(jù)流和狀態(tài)渲染。當(dāng)需要重新渲染樹的時(shí)候，都是狀態(tài)變化先行。

通過useState Hook，可以在功能組件中定義狀態(tài)。這是處理狀態(tài)簡潔、方便的方法。因?yàn)槿绱?#xff0c;常常被濫用。

實(shí)例中，假設(shè)有兩個(gè)按鈕，一個(gè)按鈕用來計(jì)數(shù)，另一個(gè)按鈕用來發(fā)送計(jì)數(shù)或者或觸發(fā)操作。但是，當(dāng)前編號永遠(yuǎn)不會(huì)顯示在組件內(nèi)。僅當(dāng)單擊第二個(gè)按鈕時(shí)才需要該請求。

錯(cuò)誤代碼示例：

問題分析

在做出反應(yīng)時(shí)，每個(gè)狀態(tài)的變化都將迫使該組件及其子組件重新呈現(xiàn)。但是上面的代碼中，由于未在渲染部分中使用該狀態(tài)，因此每次設(shè)置計(jì)數(shù)器時(shí)，都會(huì)進(jìn)行不必要的渲染，這會(huì)影響性能，還可能會(huì)產(chǎn)生副作用。

解決方案

如果要在組件內(nèi)部使用變量，變量值要在渲染前后保持，不強(qiáng)制重新渲染，則可以使用useRefHook。它會(huì)保留該值，不強(qiáng)制重新渲染組件。

陷阱三：用router.push代替鏈接

假設(shè)要編寫一個(gè)按鈕，然后單擊該按鈕，需要用戶重定向到另一個(gè)頁面。由于它是，因此此操作將是一種客戶端路由機(jī)制。因此，將需要某種庫來執(zhí)行此操作。在react中，最常用的是react-router：

錯(cuò)誤代碼示例：

問題分析

對于大多數(shù)用戶來說這可以正常工作，但其可訪問性仍然存在問題。按鈕根本不會(huì)被標(biāo)記為鏈接到另一個(gè)頁面，這使得屏幕閱讀器幾乎無法識別按鈕。可能無法在新標(biāo)簽頁或窗口中打開。

解決方案

在任何可能的情況下，跳轉(zhuǎn)鏈接都應(yīng)該用組件或常規(guī)的標(biāo)簽。

陷阱四：通過useEffect處理動(dòng)作

React引入的最常用最好用Hook之一是"useEffect"Hook。該Hook允許處理與之相關(guān)prop或state發(fā)生變化的動(dòng)作。很好用，但經(jīng)常被誤到可能不需要的地方。

一個(gè)組件場景：組件獲取項(xiàng)目列表并將其呈現(xiàn)給dom。另外，如果請求成功，將調(diào)用"onSuccess"函數(shù)，該函數(shù)作為道具傳遞給組件。

錯(cuò)誤代碼示例：

問題分析

上述代碼使用了兩個(gè)useEffect Hook，第一個(gè)Hook處理初始渲染時(shí)的API調(diào)用，第二個(gè)Hook調(diào)用onSuccess函數(shù)：假設(shè)沒有加載，沒有錯(cuò)誤但狀態(tài)為數(shù)據(jù)時(shí)，必須已成功調(diào)用。

這是正確的，并且可能永遠(yuǎn)不會(huì)失敗。這樣，也失去了動(dòng)作和需要調(diào)用的功能之間的直接聯(lián)系。無法保證這種情況只會(huì)在獲取操作成功后才會(huì)發(fā)生。

解決方案

最直接的方法是將"onSuccess"功能設(shè)置為在調(diào)用成功的實(shí)際位置：

現(xiàn)在一目了然，確切地表明了是在api調(diào)用成功的情況下onSuccess。

陷阱五：多個(gè)事件混用

什么時(shí)候該將一個(gè)組件拆分為幾個(gè)較小的組件？如何構(gòu)造組件樹？在使用基于組件的框架時(shí)，每天都會(huì)出現(xiàn)所有這些問題。但是，設(shè)計(jì)組件時(shí)常見的錯(cuò)誤是將兩個(gè)用例組合到一個(gè)組件中。下面實(shí)例假設(shè)要顯示標(biāo)題為移動(dòng)設(shè)備上的BurgerButton按鈕或桌面屏幕上的標(biāo)簽。

錯(cuò)誤代碼示例：

問題分析

通過這種方法，為HeaderInner組件設(shè)置兩種狀態(tài)。這會(huì)使得在其他地方測試或重用該組件變得更加困難。

解決方案

分清楚事件，是要設(shè)置Header，Tabs或者BurgerButton，不要將兩件事混用。

陷阱六：useEffectHook處理多個(gè)事件

例如，假設(shè)有一個(gè)組件以某種方式從后端獲取一些數(shù)據(jù)，并且還根據(jù)當(dāng)前位置顯示Breadcrumbs。

錯(cuò)誤代碼示例：

問題分析

有兩個(gè)用例，即"數(shù)據(jù)獲取"和"顯示Breadcrumbs"。兩者都用useEffectHook更新。更改useEffect時(shí)，將運(yùn)行單個(gè)Hook。問題是，當(dāng)位置更改時(shí)，也會(huì)調(diào)用該函數(shù)，這會(huì)帶來副作用。

解決方案

拆分效果，確保它們僅用于一種效果，這樣的副作用也會(huì)消失。

總結(jié)

在React中編寫組件時(shí)有很多陷阱。如何合理的避免這些常見錯(cuò)誤，可以讓我們的程序更加健壯，也能使我們的編程能力獲得提高。

總結(jié)

以上是生活随笔為你收集整理的react 组件连动效果_React组件开发中常见的陷阱的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。