ReactJS 是一個強大且流行的 JavaScript 函式庫，用於建立動態使用者介面。然而，隨著應用程式的成長，維護乾淨且有組織的程式碼對於保持其可擴展性、高效性和可讀性變得至關重要。這裡有一些最佳實踐，可以幫助您編寫乾淨、可維護的 React 程式碼。
src/ ├── components/ │ └── Button/ │ ├── Button.js │ ├── Button.css │ └── index.js ├── pages/ │ └── Home.js └── App.js
按功能（或職責）分離元件可以使程式碼庫更加模組化，並且隨著程式碼庫的成長更容易導航。
範例：
// 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>;
};
自訂掛鉤範例：
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>;
}
範例：
// Good:
const isLoggedIn = true;
const userProfile = { name: "John", age: 30 };
// Poor:
const x = true;
const obj = { name: "John", age: 30 };
範例：
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);
}
範例：
src/ ├── components/ │ └── Button/ │ ├── Button.js │ ├── Button.css │ └── index.js ├── pages/ │ └── Home.js └── App.js
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,
};
React 測試庫的基本範例：
type GreetingProps = {
name: string;
};
const Greeting: React.FC<GreetingProps> = ({ name }) => {
return <h1>Hello, {name}</h1>;
};
結論
透過遵循這些最佳實踐，您可以編寫乾淨、可擴展且易於維護的 React 程式碼。組織文件、使用功能元件、將邏輯與 UI 分開以及測試元件只是使 React 應用程式更有效率、更愉快地工作的幾種方法。開始在您的專案中應用這些技術，以提高程式碼質量，並使未來的開發更快、更愉快。
以上是ReactJS 最佳實務：編寫乾淨且可維護的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
