ReactJS 最佳實務：編寫乾淨且可維護的程式碼-js教程-PHP中文網

ReactJS Best Practices: Writing Clean and Maintainable Code

ReactJS 是一個強大且流行的 JavaScript 函式庫，用於建立動態使用者介面。然而，隨著應用程式的成長，維護乾淨且有組織的程式碼對於保持其可擴展性、高效性和可讀性變得至關重要。這裡有一些最佳實踐，可以幫助您編寫乾淨、可維護的 React 程式碼。

組織您的專案結構建立清晰的資料夾結構可以幫助您和您的團隊輕鬆找到文件。通用結構遵循“基於功能”的方法，其中每個功能都有自己的資料夾：

src/
├── components/
│   └── Button/
│       ├── Button.js
│       ├── Button.css
│       └── index.js
├── pages/
│   └── Home.js
└── App.js

登入後複製

按功能（或職責）分離元件可以使程式碼庫更加模組化，並且隨著程式碼庫的成長更容易導航。

使用功能組件和鉤子 React Hooks 在許多情況下已經取代了類別元件，並透過避免這種綁定來簡化程式碼。函數式元件通常更短、更易讀、更容易測試。

範例：

// Instead of class component:
class MyComponent extends React.Component {
  state = { count: 0 };

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return <button onClick={this.increment}>{this.state.count}</button>;
  }
}

// Use functional component with hooks:
import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

登入後複製

分解組件
大型組件難以維護和重複使用。旨在創建小型、集中的組件，每個組件處理一個任務。如果一個元件正在執行多項操作，請考慮將其分解為更小的子元件。
使用 PropTypes 或 TypeScript
React 的 PropTypes 或 TypeScript 的靜態類型可以幫助及早捕獲類型錯誤。定義預期的 prop 類型可以使元件更可預測且更不容易出錯。

PropTypes 範例：

import PropTypes from 'prop-types';

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

登入後複製

TypeScript 範例：

type GreetingProps = {
  name: string;
};

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}</h1>;
};

登入後複製

將元件邏輯與 UI 分開為了保持程式碼整潔且可測試，請將邏輯與表示分開。例如，使用自訂掛鉤來處理邏輯和管理狀態，然後將資料作為 props 傳遞給處理 UI 的元件。

自訂掛鉤範例：

import { useState, useEffect } from 'react';

function useFetchData(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data));
  }, [url]);

  return data;
}

// UI Component:
function DataDisplay({ url }) {
  const data = useFetchData(url);
  return <div>{data ? data.title : 'Loading...'}</div>;
}

登入後複製

使用有意義且一致的命名一致的命名約定使您的程式碼更具可讀性。對函數和變數使用駝峰命名法，對元件名稱使用 PascalCase，對所有 props 和狀態變數使用描述性名稱。

範例：

// Good:
const isLoggedIn = true;
const userProfile = { name: "John", age: 30 };

// Poor:
const x = true;
const obj = { name: "John", age: 30 };

登入後複製

謹慎使用 Context API React 的 Context API 是一個用於全域管理狀態的強大工具，但過度使用它會使程式碼變得複雜且難以偵錯。謹慎使用它，並考慮將 Redux 或 Zustand 等狀態管理庫用於大型應用程式。

範例：

import React, { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  return (
    <AuthContext.Provider value={{ isAuthenticated, setIsAuthenticated }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  return useContext(AuthContext);
}

登入後複製

記憶昂貴的函數和組件每次父元件重新渲染時，React 都會重新渲染元件。為了防止不必要的重新渲染，請對元件使用 React.memo，對函數使用 useMemo/useCallback。

範例：

src/
├── components/
│   └── Button/
│       ├── Button.js
│       ├── Button.css
│       └── index.js
├── pages/
│   └── Home.js
└── App.js

登入後複製

使用 CSS 模組或樣式元件透過使用 CSS 模組、樣式元件或類似工具來避免全域樣式。它們有助於將樣式範圍限定到各個元件，減少樣式衝突並提高可讀性。

CSS 模組範例：

// Instead of class component:
class MyComponent extends React.Component {
  state = { count: 0 };

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return <button onClick={this.increment}>{this.state.count}</button>;
  }
}

// Use functional component with hooks:
import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

登入後複製

樣式組件範例：

import PropTypes from 'prop-types';

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

登入後複製

測試您的組件測試可確保您的組件按預期工作並有助於及早發現錯誤。使用 Jest 和 React 測試庫為元件編寫單元測試並將測試整合到您的工作流程中。

React 測試庫的基本範例：

type GreetingProps = {
  name: string;
};

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}</h1>;
};

登入後複製

結論

透過遵循這些最佳實踐，您可以編寫乾淨、可擴展且易於維護的 React 程式碼。組織文件、使用功能元件、將邏輯與 UI 分開以及測試元件只是使 React 應用程式更有效率、更愉快地工作的幾種方法。開始在您的專案中應用這些技術，以提高程式碼質量，並使未來的開發更快、更愉快。

以上是ReactJS 最佳實務：編寫乾淨且可維護的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！