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!