構建React應用程序，請避開這十大禁忌

全文共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，加入讀者圈，一塊兒討論最新鮮的人工智能科技哦～）