Einführung

Diese Dokumentation beschreibt einen umfassenden Ansatz zur Strukturierung und Verwaltung von React-Anwendungen mithilfe eines kuratierten Satzes von Tools und Best Practices. Durch die Einhaltung dieser Richtlinien k?nnen Sie skalierbare, wartbare und effiziente Anwendungen erstellen.

Staatsverwaltung

Zustand:

• Zweck: Bietet eine einfache und leistungsstarke M?glichkeit, den globalen Anwendungsstatus zu verwalten.
• Vorteile:
  • Klare und pr?gnante API.
  • Effiziente Updates und Leistungsoptimierungen.
  • Einfache Integration mit anderen Teilen der Anwendung.
• Beispiel:

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

Abfrage reagieren:

• Zweck: Verwaltet das asynchrone Abrufen und Zwischenspeichern von Daten.
• Vorteile:
  • Automatisches Abrufen und Zwischenspeichern von Daten.
  • Einfache Handhabung von Lade-, Fehler- und Erfolgszust?nden.
  • Integrierte Abfrageungültigmachung und erneutes Abrufen.
• Beispiel:

import { useQuery } from 'react-query';

const fetchUsers = async () => {
  const response = await fetch('https://api.example.com/users');
  return response.json();
};

const UsersList = () => {
  const { isLoading, isError, data, error } = useQuery('users', fetchUsers);

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

Datenmanipulation

Mutation:

• Zweck: Behandelt Zustands?nderungen, die durch Benutzeraktionen oder API-Aufrufe ausgel?st werden.
• Vorteile:
  • Zentralisierte Mutationslogik.
  • Einfache Integration mit React Query für optimistische Updates.
• Beispiel:

import { useMutation } from 'react-query';

const createUser = async (userData) => {
  const response = await fetch('https://api.example.com/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(userData),
  });
  return response.json();
};

const CreateUserForm = () => {
  const [createUserMutation] = useMutation(createUser);

  const handleSubmit = (userData) => {
    createUserMutation(userData)
      .then(() => {
        // Handle success
      })
      .catch((error) => {
        // Handle error
      });
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
      <button type="submit">Create User</button>
    </form>
  );
};

Tischverwaltung

TanStack-Tabelle:

• Zweck: Bietet eine flexible und leistungsstarke Tabellenkomponente.
• Vorteile:
  • Anpassbar und erweiterbar.
  • Unterstützt gro?e Datens?tze und komplexe Interaktionen.
  • L?sst sich gut mit React Query zum Datenabruf integrieren.
• Beispiel:

import { useTable } from 'tanstack/react-table';

const columns = [
  { header: 'Name', accessor: 'name' },
  { header: 'Email', accessor: 'email' },
];

const data = [
  { name: 'John Doe', email: 'john@example.com' },
  // ...
];

const TableComponent = () => {
  const { getTableProps, getTableBodyProps, headerGroups, rows } = useTable({
    columns,
    data,
  });

  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row) => (
          <tr {...row.getRowProps()}>
            {row.cells.map((cell) => (
              <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

Komponentenbibliotheken

Radix-Benutzeroberfl?che:

• Zweck: Stellt eine Sammlung kopfloser UI-Komponenten bereit.
• Vorteile:
  • Anpassbar und flexibel.
  • Konzentriert sich auf die Kernfunktionalit?t ohne Styling.
  • Gut integriert mit Barrierefreiheitsstandards.
• Beispiel:

import { Menu } from '@radix-ui/react-menu';

const MenuComponent = () => {
  return (
    <Menu>
      <Menu.Button>Open Menu</Menu.Button>
      <Menu.Items>
        <Menu.Item>Item 1</Menu.Item>
        <Menu.Item>Item 2</Menu.Item>
      </Menu.Items>
    </Menu>
  );
};

Tailwind CSS:

• Zweck: Utility-first CSS-Framework.
• Vorteile:
  • Schnelle Entwicklung und Styling.
  • Konsistentes und vorhersehbares Styling.
  • Einfach anpassbar.
• Beispiel:

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

Formularverwaltung

Formik mit Yup:

• Zweck: Verwaltet den Formularstatus, die Validierung und die übermittlung.
• Vorteile:
  • Vereinfachte Formularverwaltung.
  • Deklarative Validierungsregeln.
  • Einfache Integration mit anderen Bibliotheken.
• Beispiel:

import { useQuery } from 'react-query';

const fetchUsers = async () => {
  const response = await fetch('https://api.example.com/users');
  return response.json();
};

const UsersList = () => {
  const { isLoading, isError, data, error } = useQuery('users', fetchUsers);

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

TypeScript

• Zweck: Statisch typisierte Obermenge von JavaScript.
• Vorteile:
  • Verbesserte Codequalit?t und Wartbarkeit.
  • Früherkennung von Fehlern.
  • Bessere Typsicherheit und Code-Vervollst?ndigung.

Projektstruktur

src/
├── Komponenten/
│ ├── Button.jsx
│ ├── Input.jsx
│ └── ...
├── Seiten/
│ ├── Home.jsx
│ │ Komponenten/
│ │ ├── Hero.jsx
│ │ └── ...
│ ├── About.jsx
│ └── ...
├── lib/
│ ├── utils.js
│ └── ...
├── Aktionen/
│ ├── api.js
│ └── ...
├── Gesch?fte/
│ ├── counterStore.js
│ └── ...

Fazit

Indem Sie diese Richtlinien befolgen und die empfohlenen Tools verwenden, k?nnen Sie robuste, skalierbare und wartbare React-Anwendungen erstellen. Dieser Ansatz f?rdert die Codeorganisation, Wiederverwendbarkeit und effiziente Zustandsverwaltung, was zu einem besseren Entwicklungserlebnis und hochwertigerer Software führt.

Das obige ist der detaillierte Inhalt vonReact Toolset für effizientes Codemanagement. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!