構建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,加入讀者圈,一起討論最新鮮的人工