React 是最受歡迎的 JavaScript 前端框架之一。與 Angular 等其他框架不同，它基本上是非結構化的。因此，如何編寫或建立 React 程式碼完全由你決定。
下面列出了一些你應該遵循的 React 最佳實踐，以提高你的應用效能。看看它們： 如何使用 React 和 Firebase 建立聊天應用程式.
快速連結
1. 使用函數式組件和鉤子代替類
在 React 中，你可以將類別或函數元件與 Hook 結合使用。不過，你應該多使用函數元件和 Hook，因為它們比類別能產生更簡潔、更易讀的程式碼。
這是顯示來自 NASA API 的資料的類別組件的片段。
class NasaData extends React.Component { constructor(props) { super(props)； this.setState({ data: json, }); }); } render() { const { data } = this.state; if (!data.length) return (正在獲取數據… {“ “} ); 返回（<>使用類別組件取得數據{“ “} {data.map((item) => ( {item.title} ))} ); } }您可以使用鉤子編寫相同的元件：
const NasaData = () => { const [data, setdata] = useState(null); useEffect(() => { fetch(“https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY”) .then((res) => res.json().then); [data]); return(<>使用類別組件取得數據{“ “} {data.map((item) => ( {item.title} ))} ）；}；雖然上述程式碼與類別組件的功能相同，但它不太複雜，限制較少，而且更容易理解。
2. 避免使用狀態（如果可能）
React 狀態會追蹤數據，當數據發生變化時，會導致 React 元件重新渲染。建立 React 應用程式時，應盡可能避免使用狀態，因為使用的狀態越多，需要在整個應用程式中追蹤的資料就越多。
減少使用狀態的一種方法是僅在必要時聲明它。例如，如果您要從 API 取得使用者數據，請將整個使用者物件儲存在狀態中，而不是儲存單一屬性。
而不是以下內容：
const [username, setusername] = useState('') const [password, setpassword] = useState('')您可以執行以下操作：
const [user, setuser] = useState({})3. 將與相同元件相關的文件組織在一個資料夾中
在為 React 應用程式設計資料夾結構時，請考慮使用以元件為中心的結構。這意味著將與單一元件相關的所有檔案儲存在單一資料夾中。
例如，如果您正在建立 Navbar 元件，請建立名為 Navbar 的資料夾，其中包含元件檔案、樣式表、JavaScript 檔案以及元件中使用的其他資產。
一個資料夾包含元件的所有文件，方便重複使用、共用和調試。如果您需要了解某個元件的工作原理，只需打開一個資料夾並瀏覽其內容即可。
其他 React 資料夾最佳實踐包括：
- 使用索引文件來總結元件文件的實作細節。以 Navbar 為例，建立一個 Navbar 資料夾，並將一個名為 index.js（或 .ts）的元件檔案加入到該資料夾中。
- 將可重複使用元件保存在單獨的資料夾中。如果您的元件被應用程式的多個部分使用，請考慮將它們保存在名為 零組件專區這將幫助您輕鬆找到它。
- 將實用程式函數保存在單獨的資料夾中，例如 lib 資料夾或 Assistants 資料夾。這樣可以更輕鬆地管理和重複使用這些函數。
4.避免使用指數作為主要支撐。
React 使用鍵來唯一標識數組中的元素。透過鍵，React 可以確定哪個元素已被更改、新增或從陣列中刪除。
當呈現數組時，可以使用索引作為鍵。
const Items = () => { const arr = [“item1”, “item2”, “item3”, “item4”, “item5”]; return ( <> {arr.map((elem, index) => { {elem} ; })} ）；}；雖然這種方法有時有效，但使用索引作為鍵可能會導致問題，尤其是在清單預計會發生變化的情況下。請考慮以下清單。
const arr = [“item1”, “item2”, “item3”, “item4”, “item5”];
目前，第一個清單項目「Item1」位於索引零，但如果在清單開頭新增另一個項，「Item1」的索引將變更為 1，這會改變陣列的行為。
解決方案是使用唯一值作為索引，以確保清單項目的身份保留。
5. 盡可能選擇parts而不是div。
React 元件需要傳回包含在單一標籤中的程式碼，通常或 React 的一部分。你應該盡可能地選擇部分。
利用線索DOM 的大小會不斷增加，尤其是在大型專案中，因為標籤或 DOM 節點的數量會不斷增加。網站所需的記憶體越多，瀏覽器載入網站的耗電量就越大。這會導致頁面速度變慢，並可能降低使用者體驗。
擺脫標誌的一個例子是退回單件商品時不使用「不必要的」。
const Button = () => { return Display ; };6.遵循命名約定
命名組件時，應始終使用帕斯卡命名法（刪除空格並將每個單字的首字母大寫），以區別於其他非組件的 JSX 檔案。例如：TextField、NavMenu、SuccessButton。
對於 React 元件內部宣告的函數（例如 handleInput() 或 showElement()），請使用 CamelCase（編寫語句時不帶空格或標點符號，用一個大寫字母分隔）。
7.避免重複程式碼。
如果您發現自己正在編寫重複的程式碼，請將其轉換為可重複使用的元件。
例如，為導覽選單建立一個元件是有意義的，而不是在每個需要選單的元件中重複程式碼。
這就是基於組件的架構的優勢。您可以將項目拆分成更小的元件，並在整個應用程式中重複使用。查看 如何在 React 中建立視訊播放器.
8.使用分解功能取得道具。
不要傳遞 props 對象，而是使用物件分解來傳遞屬性名稱。這樣就無需在每次使用 props 物件時都引用它。
例如，下面是一個按原樣使用屬性的元件。
const Button = (props) => { return {props.text} ; };透過物件分解，您可以直接參考文字。
const Button = ({text}) => { return {text} ; };9. 使用 map 動態顯示數組
使用 map() 動態顯示重複的 HTML 區塊。例如，您可以使用 map() 顯示標籤中的元素清單。 。
const Items = () => { const arr = [“item1”, “item2”, “item3”, “item4”, “item5”]; return ( <> {arr.map((elem, index) => { {elem} ; })} ）；}；為了比較，以下是不使用 map() 時清單的顯示方式。這種方法重複性很強。
const List = () => { return (項目 1項目 2第3項第 4 項第5項）；}；10. 寫出反應每個組成部分的測試。
為你創建的元件編寫測試，因為這可以降低出錯的可能性。測試可以確保組件的行為符合你的預期。 Jest 是 React 最受歡迎的測試框架之一，它提供了一個可以執行測試的環境。查看 如何在 React 中建立拖放元素.
React 是一個強大的框架，但你必須遵循某些實踐。
儘管 React 的使用方式非常靈活，但遵循某些做法將幫助您充分利用您的經驗。
在遵循這些技巧時，請牢記你的專案和目標，因為不同的 React 最佳實踐可能在不同的情境下更具相關性。例如，一個團隊規模較小且範圍有限的專案可能不需要與多個團隊協同工作的大型專案相同層級的資料夾組織。現在你可以看到 作為初學者如何為開源專案做出貢獻.
