全文共2841字，預計學習時長6分鐘

圖片來源：pexels.com/@bymalcolmgarret

React是一款很受歡迎的開發工具，效能優良。不過人無完人，React也一樣。React有一些特有的注意事項——如果現在不進行處理，那麼某一部分可能會造成應用程式的嚴重問題。

下面將介紹構建React應用程式時的10大禁忌。

1. 過於注重個人世界

如果花費了大量時間編寫程式碼，而沒有了解社群中的動態，則可能會犯社群報告中提到的錯誤。這樣的錯誤可能會重複20次，直到最終在某一篇帖子中發現這個錯誤。

這種情況一旦發生，就必須返回並重構這20個程式碼，但為時已晚。此時別人已經前進了一大步。當你還在趕進度的時候，他們會去了解更新的編碼動態。

當React開發出hooks功能時，很多人非常興奮。你可以構建一系列迷你items來進行試驗。其實，如果能對useReducer進行更深入的研究的話，僅僅30分鐘的研究就足以讓你回去重構大量的程式碼。

2. 使用.bind（而非類元件構造器）

大多數React開發人員知道，如果想在他們的方法內引用它來訪問自己的類別例項，應該對類方法進行繫結。（除非使用轉譯器來轉譯類屬性和類方法。）

但這裡要介紹的是行內函數。這些函式在React元件的呈現方法中進行定義，並作為道具傳遞給子元件。

通過呈現方法定義行內函數時，每當元件重新呈現時，React都會開始指定一個新的函式例項。這種重新呈現較浪費資源，會導致效能問題。

請看下例：

已知onClick={() => sayWhereTheMoneyIs("I don'tknow")} 以及 onClick={() => showThemTheMoney(0.05)} 是行內函數。

一些教程（包括Udemy的教程）建議的做法似乎快取記憶體了資訊且避免了不必要的重新呈現，因為在呈現方法中沒有使用箭向行內函數。但實際上，每個呈現階段仍在建立新函式！

如果在類元件流行的時期關注了React生態系統中的社群動態，那麼你可能已經瞭解了。

然而，自從React釋出了hook以來，.bind就逐漸消失在人們的視野之中，因為類元件越來越不流行。提到.bind，人們通常會想到繫結類方法。為了進行補充，上例根本沒有繫結類方法。不細心的話就更難注意到這個後果了。

新手應該特別注意這種反模式！

圖片來源：pexels.com/@rawpixel

3. 將動態值作為金鑰傳遞給子級

有必要為對映的子級提供唯一的金鑰嗎？這麼做是有好處的。

現在，假設items1中的一些最終值碰巧與items2中的一些最終值相同。

當某人想要重構一個類似的元件時，確實可以通過為每個子級提供唯一的金鑰來完成任務。但有兩個錯誤：

· 首先，React為了生成唯一的值，進行了不必要的工作；此外，由於金鑰每次都不同，每次呈現時都要重新建立所有節點。

· React中金鑰表明了身份資訊。為了確定元件身份，確實需要唯一的金鑰，但事實並非如此。

現在，不要擔心，每個items會有自己唯一的金鑰來表明身份。

4. 空值時申明預設引數

在應用程式元件中，如果日期最終發生錯誤，那麼它被初始化為空值。

執行程式碼時，如果直覺認為items是一個錯誤值，那麼預設情況下它應該初始化為空值。但當日期錯誤時，應用程式會崩潰，因為items為空值。這是怎麼回事？

在沒有傳遞值或未定義的情況下，預設函式引數允許使用預設值對已命名引數進行初始化。

在本例中，即使空值發生錯誤，它仍然是一個值！

5. 不改變重複程式碼

當需要儘快修復程式時，比較傾向於複製並貼上程式碼。有時，這可能是效率最高的方法。

現在應開始考慮如何抽象這些元件，以便在不更改安裝啟用的情況下進行多次重複使用。如果其中一個網格元件相對於其周圍的網格容器存在樣式問題，則必須對每一個元件進行手動更改。

更好的編碼方式是抽象出重複的部分並貼上到略微不同的道具中。

所以如果你的老闆最終改變了主意，想讓所有這些部分的高度都在300px左右，那麼僅在一個地方做出改變即可。

如果想要建立一個支援多個用例的元件，不推薦這種解決方案。這僅用於特定的用途，即已知它只會在該環境中重複使用。支援多個用例的SectionContainer的更動態的可重複使用解決方案可能變得更泛化。在不更改安裝啟用的情況下執行操作，便可允許開發人員根據需要選擇擴充套件元件的任何部分，同時保留基本安裝啟用。

6. 初始化建構函式中的道具

初始化建構函式的狀態時可能會出現漏洞。這是因為只在第一次建立元件時呼叫建構函式。

下次嘗試更改道具時，狀態將保留其先前值，因為不會在重新呈現時呼叫建構函式。

如果還沒有遇到這個問題，那麼這將有所幫助。

圖片來源：pexels.com/@pixabay

7. 用&&進行有條件呈現

當有條件地呈現元件時，一個常見的問題是&&運算子的使用。

如果條件不滿足要求，React將嘗試呈現任何提供的內容作為替代輸出。因此，當出現以下情況時：

當items.length為空時，螢幕上呈現數字0。JavaScript將數字0視為錯誤值，因此當items為空陣列時，&&運算子不會計算其右邊的表示式，只返回第一個值。

要想保留語法，可以使用雙重否定。

這樣一來，items若為是空陣列且計算的輸出是布林，React將不會在螢幕上呈現任何內容。

8. 不擴散先前的狀態

如果不小心安裝啟用狀態更新邏輯，則會出現漏洞。

最近的一個情況涉及React的hook，特別是UseReducer的安裝啟用。

當某函式呼叫並複製狀態時，基礎items的效能並沒有更改。當使用.splice對其進行變異時，這將改變state.items，並引入漏洞。

更大的程式碼會產生更大的麻煩。我們都可能會忘記上面的一個小例子，但是當出現問題時，我們必須記住這一點。這一點很容易忘記，尤其是將程式碼運用至生產中時！

9. 不顯示傳遞給子元件的道具

通常，建議顯示傳遞給子元件的道具。

有以下幾點優勢：

· 易於除錯。

· 開發者本人瞭解正在傳遞的道具。

· 其它開發者也瞭解情況，且易於讀碼。

· 易於瞭解元件的行動。

· 其它優勢在於，當顯示道具時，會對程式碼進行註釋。這樣所有人員都無需正式專案便可瞭解。大大節約了時間。

· 用來確定元件是否應重新呈現所需的道具將會減少。

可以有一些非常簡潔的用例來傳播所有的道具。

如果需要，可以考慮將元件拆分為不同的元件，以便更整潔、更易於自定義。

10. 道具鑽探

將道具傳遞給多個子元件就是所謂的程式碼味道。

道具鑽探是指父級將道具傳遞到內部的多個級別的元件。

現在，問題不在於父級或子級。它們應保持其安裝啟用不變。中間的元件可能會在React應用程式中出現問題。

這是因為目前中間的元件緊密耦合，並且接觸了太多不必要資訊。最糟糕的是，當父級重新呈現時，中間的元件也將重新呈現。這會影響鏈下面的所有子元件。

解決方法是使用上下文來代替。或者對道具進行還原（對道具進行序列化）。

留言 點贊 關注

我們一起分享AI學習與發展的乾貨

歡迎關注全平臺AI垂類自媒體 “讀芯術”

（新增小編微信：dxsxbb，加入讀者圈，一起討論最新鮮的人工