2023年幫助您提升技術水平的React最佳實踐

React一直是構建Web應用時建立使用者介面的最流行的庫之一。它被許多公司廣泛使用，並擁有一個活躍的社羣。

作為一個React開發者，瞭解這個庫的工作原理並不是你建立使用者友好、易於擴充套件和可維護的專案的唯一需要。

瞭解某些慣例也是必要的，這將使你能夠編寫乾淨的React程式碼。這不僅能幫助你更好地服務於你的使用者，還能讓你和其他從事專案的開發者更容易維護程式碼庫。

在本教程中，我們將首先討論React開發人員面臨的一些常見挑戰，然後深入探討一些你可以遵循的最佳實踐，以幫助你以更有效的方式編寫React程式碼。

1. React開發者面臨的挑戰
2. React最佳實踐

React開發者面臨的挑戰

在本節中，我們將討論React開發者在構建Web應用期間和之後所面臨的一些主要挑戰。

你在本節中看到的所有挑戰都可以通過遵循最佳實踐來避免，我們將在後面詳細討論。

我們將從影響初學者的最基本問題開始。

React的先決條件

React開發者面臨的主要挑戰之一是瞭解該庫如何工作，以及使用它的先決條件。

在學習React之前，你需要知道一些事情。由於React使用JSX，所以瞭解HTML和JavaScript是必須的。當然，你也應該知道CSS或現代CSS框架來設計你的網路應用。

特別是，在深入研究React之前，你應該知道一些核心的JavaScript概念和功能。其中一些，大多屬於ES6，包括：

• 箭頭函式
• 休止符
• 擴充套件運算子
• 模組
• 去結構化
• 陣列方法
• 模板字詞
• 承諾
• let 和  const 變數

上面列出的JavaScript主題將幫助你作為一個初學者理解React的工作原理。

你還會了解到React中的新概念，比如：

• 元件
• JSX
• 狀態管理
• Props
• 渲染元素
• 事件處理
• 條件性渲染
• 列表和鍵
• 表格和表格驗證
• 鉤子
• 樣式設計

對React概念和使用該庫的先決條件有一個紮實的瞭解，將有助於你有效地利用其功能。

但不要讓這些壓倒你。通過不斷的練習和學習，你可以迅速掌握如何使用React來構建令人敬畏的專案。這類似於學習一種新的程式語言–它只是需要一點時間和實踐來理解。

狀態管理

在React中更新你的變數的狀態/值的工作方式與你使用普通JavaScript的方式不同。

在JavaScript中，更新一個變數就像使用等價運算子(=)給它分配一個新值一樣簡單。下面是一個例子：

var x = 300;
function updateX(){
x = 100;
}
updateX();
console.log(x);
// 100

在上面的程式碼中，我們建立了一個名為 x 的變數，初始值為 300。

使用等於運算子，我們為其指定了一個新值 100 。這是在 updateX 函式中編寫的。

在React中，更新變數的狀態/值的工作方式不同。以下是操作方法：

import { useState } from 'react';
function App() {
const [x, setX] = useState(300)
let updateX =()=>{
setX(100);
}
return (
<div className="App">
<h1>{x}</h1>
<button onClick={updateX}>Update X</button>
</div>
);
}
export default App;

當更新React中變數的狀態時，可以使用 useState 鉤子。使用此鉤子時需要注意三點：

• 變數名稱
• 用於更新變數的函式
• 變數的初始值/狀態

在我們的示例中，x 是變數的名稱，setX 是用於更新 x 值的函式，而 x 的初始值（300）作為引數傳遞給 useState 函式：

 const [x, setX] = useState(300)

為了更新 x 的狀態，我們使用了 setX 函式：

import { useState } from 'react';
let updateX =()=>{
setX(100);
}

所以 updateX 函式呼叫了 setX 函式，然後將 x 的值設定為 100。

雖然這對於更新你的變數的狀態似乎是完美的，但在非常大的專案中，它增加了你的程式碼的複雜性。擁有大量的狀態鉤子使得程式碼非常難以維護和理解，特別是當你的專案規模擴大時。

使用狀態鉤子的另一個問題是，建立的這些變數不能在組成你的應用程式的不同元件之間共享。你仍然必須使用Props來將資料從一個變數傳遞到另一個變數。

幸運的是，我們有一些庫可以在React中有效地處理狀態管理。它們甚至允許你建立一次變數，並在你的React應用中的任何地方使用它。這些庫中的一些包括Redux、Recoil和Zustand。

選擇第三方庫進行狀態管理的問題是，你將被迫學習與你在React中已經學過的東西相異的新概念。例如，Redux以有大量的模板程式碼而聞名，這使得初學者難以掌握（儘管這一點正在被Redux Toolkit修復，它讓你寫的程式碼比Redux少）。

可維護性和可擴充套件性

隨著產品的使用者需求不斷變化，總是需要對構成產品的程式碼進行修改。

如果你的程式碼對團隊來說不容易維護，那麼你的程式碼往往很難擴充套件。諸如此類的困難來自於編寫程式碼時遵循的不良做法。他們一開始可能看起來工作得很完美，給你帶來了想要的結果，但是任何 “現在 “有效的東西對於你專案的未來和發展來說都是低效的。

在下一節中，我們將介紹一些慣例，這些慣例可以幫助改善你寫React程式碼的方式。這也將幫助你在與專業團隊合作時更好地進行協作。

React最佳實踐

在這一節中，我們將談論一些編寫React程式碼時需要遵循的最佳實踐。

1. 保持清晰的資料夾結構

資料夾結構有助於你和其他開發者瞭解專案中使用的檔案和資產的安排。

有了一個好的資料夾結構，就可以很容易地瀏覽，節省時間並幫助避免混亂。資料夾結構因每個團隊的偏好而不同，但這裡有一些React中常用的資料夾結構。

按功能或路線對資料夾進行分組

根據路線和功能對資料夾中的檔案進行分組，有助於將關於某個特定功能的所有內容放在一個空間中。例如，如果你有一個使用者儀表盤，你可以把與儀表盤有關的JavaScript、CSS和測試檔案放在一個資料夾中。

下面是一個例子來證明：

dashboard/
index.js
dashboard.css
dashboard.test.js
home/
index.js
Home.css
HomeAPI.js
Home.test.js
blog/
index.js
Blog.css
Blog.test.js

從上面可以看出，應用程式的每個核心功能的所有檔案和資產都儲存在同一個資料夾中。

分組類似的檔案

另外，你也可以將類似的檔案分組在同一個資料夾中。你也可以為Hooks、元件等設定單獨的資料夾。請看這個例子：

hooks/
useFetchData.js
usePostData.js
components/
Dashboard.js
Dashboard.css
Home.js
Home.css
Blog.js
Blog.css

編碼時，你不必嚴格遵循這些資料夾結構。如果你有一個特定的方式來排列你的檔案，去吧。只要你和其他開發者對檔案結構有一個清晰的認識，你就可以開始了

2. 建立一個結構化的匯入順序

隨著你的React應用程式的不斷增長，你一定會做額外的匯入。匯入檔案的結構在幫助你理解組成你的元件方面有很大的作用。

作為一種慣例，將類似的實用程式組合在一起似乎效果不錯。例如，你可以將外部或第三方匯入與本地匯入分開。

請看下面的例子：

import { Routes, Route } from "react-router-dom";
import { createSlice } from "@reduxjs/toolkit";
import { Menu } from "@headlessui/react";
import Home from "./Home";
import logo from "./logo.svg";
import "./App.css";

在上面的程式碼中，我們首先將第三方庫分組（這些是我們必須事先安裝的庫）。

然後我們匯入了我們在本地建立的檔案，如樣式表、圖片和元件。

為了簡單和容易理解，我們的例子並沒有描述一個非常大的程式碼庫，但請記住，與這種匯入格式保持一致將有助於你和其他開發人員更好地理解你的React應用程式。

你可以進一步根據檔案型別對本地檔案進行分組，如果這對你有用的話–也就是說，將元件、圖片、樣式表、Hooks等分別歸入本地匯入檔案。

下面是一個例子：

import Home from "./Home";
import About from "./About"
import Contact from "./Contact"
import logo from "./logo.svg";
import closeBtn from "./close-btn.svg"
import "./App.css";
import "Home.css"

3. 遵守命名慣例

命名約定有助於提高程式碼的可讀性。這不僅適用於元件名稱，甚至適用於變數名稱，一直到Hooks。

React文件沒有提供任何用於命名元件的官方模式。最常用的命名約定是camelCase和PascalCase。

PascalCase主要用於元件名稱：

import React from 'react'
function StudentList() {
return (
<div>StudentList</div>
)
}
export default StudentList

上面的元件名為 StudentList，它比 Studentlist 或 studentlist更可讀。

另一方面，camelCase命名約定主要用於命名變數、鉤子、函式、陣列等：

const [firstName, setFirstName] = useState("Ihechikara");
const studentList = [];
const studentObject = {};
const getStudent = () => {}

4. 使用Linter

Linter工具有助於提高程式碼質量。最受歡迎的JavaScript和React的linter工具之一是ESlint。但這究竟是如何幫助提高程式碼質量的呢？

Linter工具有助於提高程式碼庫的一致性。當使用像ESLint這樣的工具時，你可以設定你希望每個在專案上工作的開發者都能遵守的規則。這些規則可能包括要求使用雙引號而不是單引號，箭頭函式週圍的大括號，特定的命名慣例，以及更多。

該工具會觀察你的程式碼，然後在規則被破壞時通知你。破壞規則的關鍵詞或行通常會用紅色下劃線。

由於每個開發人員都有自己的編碼風格，Linter工具可以幫助實現程式碼的統一。

Linter工具還可以幫助我們輕鬆修復錯誤。我們可以看到拼寫錯誤，已宣告但未使用的變數，以及其他此類功能。其中一些bug可以在你編碼時自動修復。

像ESLint這樣的工具是內建於大多數程式碼編輯器中的，所以你可以在旅途中獲得linter功能。你還可以根據你的編碼要求來配置它。

5. 使用片段庫

使用一個擁有活躍社羣的框架，最酷的事情是有很多工具被創造出來以使開發更容易。

外掛庫可以通過提供開發人員經常使用的預置程式碼，使開發更快。

一個很好的例子是ES7+ React/Redux/React-Native snippets擴充套件，它有很多有用的命令用於生成預置程式碼。例如，如果你想建立一個React功能元件，而不需要打出所有的程式碼，你使用該擴充套件所需要做的就是輸入 rfce 並點選Enter。

上面的命令將繼續生成一個功能元件，其名稱與檔名相對應。我們使用ES7+ React/Redux/React-Native片段擴充套件生成了下面的程式碼。

import React from 'react'
function StudentList() {
return (
<div>StudentList</div>
)
}
export default StudentList

另一個有用的程式碼段工具是Tailwind CSS IntelliSense擴充套件，它簡化了使用TailwindCSS設定網頁樣式的過程。該擴充套件可以通過建議實用程式類、語法高亮顯示和縮排功能來幫助您自動完成。你甚至可以在編碼時看到你的顏色。

6. 合併CSS和JavaScript

在處理大型專案時，為每個元件使用不同的樣式表檔案可能會使檔案結構龐大且難以導航。

這個問題的解決方案是將CSS和JSX程式碼結合起來。您可以使用框架/庫，如Tailwind CSS和Emotion。

以下是Tailwind CSS的樣式：

<p className="font-bold mr-8">resource edge</p>

上面的程式碼為段落元素提供了粗體字型，並在右側新增了一些邊距。我們可以使用框架的實用程式類來實現這一點。

以下是您如何使用情感來設計元素的風格：

<h1
css={css`
color: black;
font-size: 30px;
`}
>
Hello World!
</h1>

7. 限制元件建立

React的核心特徵之一是程式碼的可重用性。您可以建立一個元件並儘可能多次重用其邏輯，而無需重寫該邏輯。

考慮到這一點，您應該始終限制建立的元件的數量。不這樣做會使檔案結構膨脹，因為不必要的檔案本來就不應該存在。

我們將使用一個非常簡單的示例來演示這一點：

function UserInfo() {
return (
<div>
<h1>My name is Ihechikara.</h1>
</div>
);
}
export default UserInfo

上面的元件顯示了使用者的名稱。如果我們為每個使用者建立一個不同的檔案，那麼最終會有不合理的檔案數量。（當然，我們使用使用者資訊來保持簡單。在現實生活中，你可能需要處理不同型別的邏輯。）

為了使元件可重用，我們可以使用Props。以下是操作方法：

function UserInfo({userName}) {
return (
<div>
<h1>My name is {userName}.</h1>
</div>
);
}
export default UserInfo

之後，我們可以匯入該元件，並根據需要多次使用它：

import UserInfo from "./UserInfo";
function App() {
return (
<div className="App">
<UserInfo userName={"Ihechikara"} />
<UserInfo userName={"John"} />
<UserInfo userName={"Jane"} />
</div>
);
}
export default App;

現在，我們有三個不同的 UserInfo 元件例項，它們來自在一個檔案中建立的邏輯，而不是每個使用者有三個單獨的檔案。

8. 實施延遲載入

隨著React應用的增長，延遲載入非常有用。當你有一個大的程式碼庫時，網頁的載入時間會變慢。這是因為每個使用者每次都必須載入整個應用程式。

“延遲載入”是用於各種實現的術語。在這裡，我們將其與JavaScript和React相關聯，但您也可以在影象和視訊上實現延遲載入。

預設情況下，React捆綁並部署整個應用程式。但是我們可以使用延遲載入（也稱為程式碼拆分）來改變這種行為。

基本上，您可以限制應用程式在某個特定點載入的部分。這是通過拆分捆綁包並僅載入與使用者需求相關的捆綁包來實現的。例如，您可以首先僅載入使用者登入所需的邏輯，然後僅在使用者成功登入後才載入使用者儀表板的邏輯。

9. 使用可重複使用的鉤子

React中的鉤子可以讓你利用React的一些額外功能，比如與你的元件的狀態進行互動，以及執行與你的元件中某些狀態變化有關的後效。我們可以在不寫類元件的情況下完成這一切。

我們還可以使Hooks可重複使用，這樣我們就不必在每個使用它們的檔案中重新輸入邏輯。我們通過建立自定義Hooks來做到這一點，這些Hooks可以在應用程式的任何地方匯入。

在下面的例子中，我們將建立一個用於從外部API獲取資料的Hook：

import { useState, useEffect } from "react";
function useFetchData(url) {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url)
.then((res) => res.json())
.then((data) => setData(data))
.catch((err) => console.log(`Error: ${err}`));
}, [url]);
return { data };
}
export default useFetchData;

我們已經建立了一個用於從上面的API中獲取資料的Hook。現在它可以被匯入到任何元件中。這樣我們就不用在每個需要獲取外部資料的元件中輸入所有的邏輯了。

我們可以在React中建立的自定義Hooks的型別是無限的，所以由你來決定如何使用它們。只要記住，如果它是一個必須在不同的元件中重複使用的功能，你肯定應該讓它可重複使用。

10. 記錄和管理錯誤

在React中，有不同的方法來處理錯誤，如使用錯誤邊界、嘗試和捕捉塊或使用外部庫，如react-error-boundary。

React 16中引入的內建錯誤邊界是類元件的功能，所以我們不會討論它，因為我們建議你使用功能元件而不是類元件。

另一方面，使用 try 和 catch 區塊只適用於指令性程式碼，而不是宣告性程式碼。這意味著在使用JSX時，它不是一個好的選擇。

我們最好的建議是使用一個像 react-error-boundary 這樣的庫。這個庫提供的功能可以包裹在你的元件中，這將幫助你在React應用被渲染時檢測錯誤。

11. 監控和測試你的程式碼

在開發過程中測試你的程式碼有助於你編寫可維護的程式碼。不幸的是，這是很多開發者忽視的事情。

儘管許多人可能認為，在構建你的網路應用程式時，測試並不是什麼大事，但它有無數的好處。以下是其中的一些：

• 檢測錯誤會導致程式碼質量的提高。
• 單元測試可以被記錄下來，用於資料收集和未來參考。
• 早期的錯誤檢測為你節省了支付給開發人員的費用，以撲滅如果不加檢查可能引起的火災。
• 沒有錯誤的應用程式和網站會贏得受眾的信任和忠誠，從而帶來更大的增長。

你可以使用Jest或React測試庫等工具來測試你的程式碼。有很多測試工具供你選擇–這一切都歸結於最適合你的工具。

你也可以在構建React應用程式時，通過在瀏覽器中執行這些應用程式來測試它們。你通常會得到任何檢測到的錯誤顯示在螢幕上。這類似於使用DevKinsta開發WordPress網站–這個工具允許你在本地機器上設計、開發和部署WordPress網站。

12. 使用功能元件

在React中使用功能元件有很多好處。你寫的程式碼更少，更容易閱讀，官方React文件的測試版正在使用功能元件（Hooks）進行重寫，所以你肯定應該習慣使用它們。

使用功能元件，你不必擔心使用 this 或使用類。由於Hooks的存在，你還可以通過寫更少的程式碼來輕鬆管理你的元件的狀態。

你在React上找到的大多數更新的資源都使用了功能元件，當你遇到問題時，可以很容易地理解和遵循社羣建立的有用指南和資源。

13. 跟上React版本變化的步伐

隨著時間的推移，新的功能會被引入，而一些舊的功能會被修改。最好的方法是關注官方文件。

你也可以加入社交媒體上的React社羣，在變化發生時獲得相關資訊。

保持對React當前版本的瞭解將有助於你確定何時優化或修改你的程式碼庫以獲得最佳效能。

還有一些圍繞React建立的外部庫，你也應該瞭解最新情況–比如React Router，它用於React的路由。瞭解這些庫的變化可以幫助你對你的應用程式進行相關的重要修改，並使每個人在專案中的工作更容易。

此外，當新版本釋出時，一些功能可能會被廢棄，某些關鍵詞可能會被改變。為了安全起見，在發生這種變化時，你應該始終閱讀文件和指南。

14. 使用一個快速、安全的主機供應商

如果你想在建立你的網路應用程式後讓每個人都能訪問它，你就必須託管它。重要的是，你要使用一個快速和安全的託管供應商。

託管你的網站使你可以使用不同的工具，使你的網站的擴充套件和管理變得容易。託管你的網站的伺服器使你本地機器上的檔案有可能安全地儲存在伺服器上。託管你的網站的總體好處是，其他人可以看到你所創造的很棒的東西。

有各種平臺為開發者提供免費的託管服務，如Firebase、Vercel、Netlify、GitHub Pages，或付費服務，如Azure、AWS、GoDaddy、Bluehost等。

小結

學習如何使用React並不是建立優秀網路應用的全部要求。就像Angular、Vue等其他框架一樣，有一些你應該遵循的最佳實踐，以幫助你構建高效的產品。

遵循這些React慣例不僅有助於你的應用程式，而且對你作為一個前端開發者也有好處–你學會了如何編寫高效、可擴充套件和可維護的程式碼，而且你在你的領域中作為一個專業人士脫穎而出。

因此，當你用React構建你的下一個網路應用時，請牢記這些最佳實踐，使你的使用者和你的開發者都能輕鬆使用和管理產品。

你還知道哪些在本文中沒有提到的React最佳實踐？請在下面的評論中分享它們。