ReactJS Best Practices: Sauberen und wartbaren Code schreiben

ReactJS ist eine leistungsstarke und beliebte JavaScript-Bibliothek zum Erstellen dynamischer Benutzeroberflächen. Wenn Ihre Anwendung jedoch wächst, ist es wichtig, sauberen und organisierten Code beizubehalten, um ihn skalierbar, effizient und lesbar zu halten. Hier sind einige Best Practices, die Ihnen helfen, sauberen, wartbaren React-Code zu schreiben.

1. Organisieren Sie Ihre Projektstruktur Durch die Einrichtung einer klaren Ordnerstruktur können Sie und Ihr Team Dateien leichter finden. Eine gemeinsame Struktur folgt einem „featurebasierten“ Ansatz, bei dem jedes Feature seinen eigenen Ordner hat:

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

Durch die Trennung von Komponenten nach Funktion (oder Verantwortung) kann die Codebasis modularer und einfacher zu navigieren sein, wenn sie wächst.

1. Verwenden Sie funktionale Komponenten und Haken React Hooks haben in vielen Fällen Klassenkomponenten ersetzt und vereinfachen den Code, indem sie diese Bindungen vermeiden. Funktionskomponenten sind im Allgemeinen kürzer, besser lesbar und einfacher zu testen.

Beispiel:

// 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>;
}

1. Komponenten aufschlüsseln
   Große Komponenten sind schwer zu warten und wiederzuverwenden. Versuchen Sie, kleine, fokussierte Komponenten zu erstellen, die jeweils eine einzelne Aufgabe übernehmen. Wenn eine Komponente mehrere Aufgaben erfüllt, sollten Sie sie in kleinere Unterkomponenten aufteilen.

2. Verwenden Sie PropTypes oder TypeScript
   Die PropTypes von React oder die statische Typisierung von TypeScript können dabei helfen, Typfehler frühzeitig zu erkennen. Durch die Definition erwarteter Requisitentypen werden Komponenten vorhersehbarer und weniger fehleranfällig.

Beispiel mit PropTypes:

import PropTypes from 'prop-types';

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

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

Beispiel mit TypeScript:

type GreetingProps = {
  name: string;
};

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

1. Halten Sie die Komponentenlogik von der Benutzeroberfläche getrennt Um den Code sauber und testbar zu halten, trennen Sie die Logik von der Präsentation. Verwenden Sie beispielsweise benutzerdefinierte Hooks, um die Logik zu verwalten und den Status zu verwalten, und übergeben Sie dann Daten als Requisiten an Komponenten, die die Benutzeroberfläche verwalten.

Beispiel für einen benutzerdefinierten Haken:

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>;
}

1. Verwenden Sie eine aussagekräftige und konsistente Benennung Konsistente Namenskonventionen machen Ihren Code besser lesbar. Verwenden Sie camelCase für Funktionen und Variablen, PascalCase für Komponentennamen und beschreibende Namen für alle Requisiten und Zustandsvariablen.

Beispiel:

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

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

1. Verwenden Sie die Kontext-API sorgfältig Die Kontext-API von React ist ein leistungsstarkes Tool für die globale Zustandsverwaltung, aber eine übermäßige Nutzung kann Ihren Code komplex und schwer zu debuggen machen. Gehen Sie sparsam damit um und erwägen Sie die Verwendung von Zustandsverwaltungsbibliotheken wie Redux oder Zustand für größere Anwendungen.

Beispiel:

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);
}

1. Merken Sie sich teure Funktionen und Komponenten React rendert Komponenten jedes Mal neu, wenn die übergeordnete Komponente neu gerendert wird. Um unnötiges erneutes Rendern zu verhindern, verwenden Sie React.memo für Komponenten und useMemo/useCallback für Funktionen.

Beispiel:

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

1. Verwenden Sie CSS-Module oder Styled-Components Vermeiden Sie globale Stile, indem Sie CSS-Module, gestaltete Komponenten oder ähnliche Tools verwenden. Sie helfen dabei, Stile auf einzelne Komponenten zu beschränken, Stilkonflikte zu reduzieren und die Lesbarkeit zu verbessern.

Beispiel mit CSS-Modulen:

// 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>;
}

Beispiel mit Styled-Components:

import PropTypes from 'prop-types';

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

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

1. Testen Sie Ihre Komponenten Durch Tests stellen Sie sicher, dass Ihre Komponenten wie erwartet funktionieren, und helfen dabei, Fehler frühzeitig zu erkennen. Verwenden Sie die Jest and React Testing Library, um Komponententests für Komponenten zu schreiben und Tests in Ihren Workflow zu integrieren.

Grundlegendes Beispiel mit React Testing Library:

type GreetingProps = {
  name: string;
};

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

Fazit

Indem Sie diese Best Practices befolgen, können Sie React-Code schreiben, der sauber, skalierbar und leicht zu warten ist. Das Organisieren von Dateien, die Verwendung funktionaler Komponenten, die Trennung von Logik und Benutzeroberfläche und das Testen von Komponenten sind nur einige Möglichkeiten, um Ihre React-Anwendungen effizienter und angenehmer zu gestalten. Beginnen Sie mit der Anwendung dieser Techniken in Ihren Projekten, um die Qualität Ihres Codes zu steigern und die zukünftige Entwicklung schneller und angenehmer zu gestalten.

Das obige ist der detaillierte Inhalt vonReactJS Best Practices: Sauberen und wartbaren Code schreiben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!