[分享]2021 年對 React 前端程式設計師的 10 個程式碼最佳實踐建議

hfpp2012 發表於 2021-01-13

寫 React 程式這麼多年,有些人可能還沒注意到如何去規範專案程式碼,接下來呢,給 10 個建議,希望能幫到你!

1. 組織好專案目錄結構

[分享]2021 年對 React 前端程式設計師的 10 個程式碼最佳實踐建議

在 React 專案中,沒有強制規定目錄的結構,但是有一個好的規範,可以讓你更好地組織程式碼,也能更好的進行程式碼後期維護。

這裡有個建議:經常被重複利用的 Component(元件)要抽出來,放到一個同一個目錄下。

這樣的程式碼好理解,好維護。

2. 讓你的元件(Component)更緊湊

[分享]2021 年對 React 前端程式設計師的 10 個程式碼最佳實踐建議

注意一個原則:不要重複,不要重複,不要重複!!!

讓你的元件足夠小,不要包含多餘的內容,這樣好維護。

如果元件有包含別的元件,應該抽出來的,讓其變成一個單獨的元件。

注意下面的兩個原則:

  • 重用性 - 重複利用你的程式碼
  • 可維護性 - 遲量小,不復雜

3. 明智地命名你的元件

選擇一個好記,容易理解的名稱來命名元件。

用英文名,而且首字母大寫,以跟 html 元素區別開來。

[分享]2021 年對 React 前端程式設計師的 10 個程式碼最佳實踐建議

4. 不要重複(Don’t Repeat Yourself)

不要重複是作為程式設計師寫程式碼的原則了,這個不限於前端。

不重複寫程式碼會僻免程式碼冗餘,而且更好維護,不會出現,改動一個功能,要到處改相同程式碼的情況。

在 React 中僻免重複,可以適當使用高階元件

5. 管理好狀態資料(state)

[分享]2021 年對 React 前端程式設計師的 10 個程式碼最佳實踐建議

不要把 state 一把梭,跨元件間傳遞資料會讓程式碼變得難維護。

可以適當使用 contextredux

6. 在 JavaScript 中寫樣式(CSS)

我們經常在 .css 或 .scss 檔案中寫樣式,當專案變得很大時,對可讀性不友好,而且難維護 。

我們應該在元件中寫樣式,這樣維護樣式時,直接找到元件,很好維護。

可以使用下面的流行庫來解決:

7. 把 render 和 state 儘量分開

我們經常需要區分出有狀態的元件和無狀態元件。

我們經常會從遠端 load 一些資料,load 的資料可以作為引數傳給子元件,遲早做到分開。

如下圖:

[分享]2021 年對 React 前端程式設計師的 10 個程式碼最佳實踐建議

8. 多用型別檢查系統

多用 TypeScript 作為型別約束,在執行之前就可以僻免一些不必要的出錯。

當然學習 TypeScript 是要成本的,但是 TypeScript 確實是強有力的工具,不僅有程式碼提示,還能提前發現錯誤。

這裡可以學習 TypeScript:TypeScript 基礎教程 2020 年重製版視訊

花 10 分鐘入個門,沒問題的!

9. 使用 ESLint 工具

每個程式設計師有自己的程式碼風格,如果在團隊中開發,不同的程式碼風格會讓專案合作變得困難。

如何保證統一的程式碼風格呢?就要用工具來約束。

我們可以使用 ESLint 這樣的工具。

10. 寫測試程式碼

單元測試或整合測試能夠在模擬環境跑一遍程式碼,很好地代替肉測。

大團隊都有這個,可以更好的保持程式碼健全性。

一處程式碼修改了,整個功能都要測試,肉測很難全面測試,這個時候需要用到程式碼測試,金融系統更需要這個。

推薦的工具:

好,希望對大家有所幫助!

本作品採用《CC 協議》,轉載必須註明作者和本文連結