React 最佳實踐在 2022 年提升您的遊戲水平

已發表: 2022-12-09

在構建 Web 應用程序時，React 仍然是用於創建用戶界面的最受歡迎的庫之一。 它被許多公司廣泛使用，並擁有一個活躍的社區。

作為一名 React 開發人員，了解庫的工作原理並不是構建用戶友好、易於擴展和維護的項目所需的唯一內容。

還需要了解某些約定，這將使您能夠編寫乾淨的 React 代碼。 這不僅可以幫助您更好地為用戶服務，還可以讓您和從事該項目的其他開發人員更輕鬆地維護代碼庫。 正在處理你的下一個 React 項目？ 學習編寫乾淨的 React 代碼是改變遊戲規則的力量從這裡開始 ️ 點擊推文

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

讓我們開始吧！

React 開發者面臨的挑戰

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

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

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

反應的先決條件

React 開發人員面臨的主要挑戰之一是了解該庫的工作原理以及使用它的先決條件。

在學習 React 之前，您需要了解幾件事。 由於 React 使用 JSX，因此必須了解 HTML 和 JavaScript。 當然，您還應該了解 CSS 或用於設計 Web 應用程序的現代 CSS 框架。

特別是，在深入研究 React 之前，您應該了解一些核心 JavaScript 概念和功能。 其中一些主要屬於 ES6，包括：

  • 箭頭函數
  • 休息操作員
  • 傳播算子
  • 模塊
  • 解構
  • 數組方法
  • 模板文字
  • 承諾
  • let和const變量

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

您還將了解 React 中的新概念，例如：

  • 成分
  • 建興興業
  • 狀態管理
  • 道具
  • 渲染元素
  • 事件處理
  • 條件渲染
  • 列表和鍵
  • 表單和表單驗證
  • 掛鉤
  • 造型

深入了解 React 概念和使用該庫的先決條件將幫助您有效地利用其功能。

但是不要讓這壓倒你。 通過不斷的實踐和學習，你可以快速掌握如何使用 React 構建出色的項目。 這類似於學習一門新的編程語言——只是需要一些時間和練習來理解。

狀態管理

在 React 中更新變量的狀態/值與使用 vanilla 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 Hook。 使用這個Hook需要注意三點：

  • 變量名
  • 更新變量的函數
  • 變量的初始值/狀態

在我們的示例中， 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 。

雖然這似乎非常適合更新變量的狀態，但它會增加非常大的項目中代碼的複雜性。 大量的 State Hooks 使得代碼很難維護和理解，尤其是當你的項目規模擴大時。

使用 State Hook 的另一個問題是創建的這些變量不會在組成您的應用程序的不同組件之間共享。 您仍然必須使用 Props 將數據從一個變量傳遞到另一個變量。

對我們來說幸運的是，有一些庫可以在 React 中有效地處理狀態管理。 它們甚至允許你創建一個變量一次，然後在你的 React 應用程序中的任何地方使用它。 其中一些庫包括 Redux、Recoil 和 Zustand。

選擇第三方庫進行狀態管理的問題在於，您將被迫學習與您在 React 中已經學過的內容不同的新概念。 例如，Redux 以擁有大量樣板代碼而著稱，這讓初學者難以掌握（儘管 Redux Toolkit 已解決此問題，與 Redux 相比，它可以讓您編寫更少的代碼）。

可維護性和可擴展性

隨著產品的用戶需求不斷變化，總是需要對構成產品的代碼進行更改。

當團隊不容易維護代碼時，通常很難擴展代碼。 在編寫代碼時遵循不良做法會導致此類困難。 它們一開始似乎工作得很好，給了你想要的結果，但任何“暫時”有效的東西對你項目的未來和發展來說都是低效的。

在下一節中，我們將介紹一些有助於改進 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 應用程序。

如果適合您，您可以根據文件類型進一步對本地文件進行分組——也就是說，將組件、圖像、樣式表、掛鉤等分別分組在本地導入下。

這是一個例子：

 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 命名約定主要用於命名變量、Hooks、函數、數組等：

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

4.使用短絨

linter 工具有助於提高代碼質量。 ESlint 是 JavaScript 和 React 最流行的 linter 工具之一。 但這對提高代碼質量有何幫助呢？

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 擴展，它簡化了使用 Tailwind CSS 設置網頁樣式的過程。 該擴展可以通過建議實用程序類、語法突出顯示和 linting 功能來幫助您自動完成。 您甚至可以在編碼時看到顏色的樣子。

6.結合CSS和JavaScript

在處理大型項目時，為每個組件使用不同的樣式表文件會使您的文件結構龐大且難以導航。

這個問題的一個解決方案是結合你的 CSS 和 JSX 代碼。 您可以為此使用 Tailwind CSS 和 Emotion 等框架/庫。

以下是使用 Tailwind CSS 的樣式：

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

上面的代碼為段落元素提供了粗體字體，並在右側添加了一些邊距。 我們可以使用框架的實用程序類來做到這一點。

以下是使用 Emotion 設置元素樣式的方法：

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

7.限制組件創建

React 的核心特性之一是代碼的可重用性。 您可以創建一個組件並儘可能多次地重用其邏輯，而無需重寫該邏輯。

為停機和 WordPress 問題苦苦掙扎？ Kinsta 是旨在節省您時間的託管解決方案！ 查看我們的功能

考慮到這一點，您應該始終限制創建的組件數量。 不這樣做會使文件結構膨脹，其中包含本來不應存在的不必要文件。

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

 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 來實現這一點。

在下面的示例中，我們將創建一個 Hook 用於從外部 API 獲取數據：

 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;

我們已經創建了一個 Hook 用於從上面的 API 中獲取數據。 現在它可以導入到任何組件中。 這節省了我們在必須獲取外部數據的每個組件中鍵入所有邏輯的壓力。

我們可以在 React 中創建的自定義 Hooks 的類型是無限的，所以如何使用它們取決於你。 請記住，如果它是一個必須在不同組件之間重複的功能，那麼您絕對應該使其可重用。

10.記錄和管理錯誤

在 React 中有多種處理錯誤的方法，例如使用錯誤邊界、try 和 catch 塊或使用外部庫（如react-error-boundary 。

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

另一方面，使用try和catch塊只適用於命令式代碼，而不適用於聲明式代碼。 這意味著在使用 JSX 時它不是一個好的選擇。

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

11.監控和測試你的代碼

在開發期間測試您的代碼有助於您編寫可維護的代碼。 不幸的是，這是許多開發人員忽略的事情。

儘管許多人可能會爭辯說，在構建 Web 應用程序時測試並不是什麼大問題，但它具有無數的優勢。 這裡僅僅是少數：

  • 測試可幫助您檢測錯誤和缺陷。
  • 檢測錯誤可以提高代碼質量。
  • 可以記錄單元測試以供數據收集和將來參考。
  • 早期錯誤檢測可以節省您支付給開發人員的費用，以消除錯誤如果不加以檢查可能導致的火災。
  • 無錯誤的應用程序和網站贏得了受眾的信任和忠誠度，從而帶來更大的增長。

您可以使用 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 等。

您還可以使用 Kinsta 的應用程序託管平台。 您需要做的就是連接一個 GitHub 存儲庫，從 Kinsta 的 25 個全球定位的數據中心中進行選擇，然後開始。 您將獲得快速設置、24/7 支持、頂級安全性、自定義域、高級報告和監控工具等的訪問權。

概括

學習如何使用 React 並不是創建出色的 Web 應用程序所需要的全部。 與 Angular、Vue 等任何其他框架一樣，您應該遵循一些最佳實踐來幫助您構建高效的產品。

遵循這些 React 約定不僅對您的應用有幫助，而且對您作為前端開發人員也有好處——您將學習如何編寫高效、可擴展和可維護的代碼，並在您的領域中脫穎而出。 想要加強您的 React 編碼遊戲嗎？ 您需要知道的一切都在本指南中點擊鳴叫

因此，在使用 React 構建您的下一個 Web 應用程序時，請牢記這些最佳實踐，以使您的用戶和開發人員都能輕鬆使用和管理該產品。

您還知道還有哪些本文未提及的 React 最佳實踐？ 在下面的評論中分享它們。 編碼愉快！