ドキュメント価格ブログ
お問い合わせ
ログイン無料で新規登録
Back to Tech Articles

Praktische Strategien zur Dekomposition großer Komponenten in React und Vue

9月 17, 2025
# Misc

Lukas Schneider

DevOps Engineer · Leapcell

この記事はEnglish、日本語、한국어でも利用できます
Cover of "Praktische Strategien zur Dekomposition großer Komponenten in React und Vue"

Einleitung

In der sich rasant entwickelnden Landschaft der Frontend-Entwicklung haben sich React und Vue als dominante Kräfte etabliert und ermöglichen es Entwicklern, komplexe und interaktive Benutzeroberflächen zu erstellen. Mit zunehmender Komplexität von Anwendungen entsteht jedoch eine häufige Herausforderung: das Wachstum großer, monolithischer Komponenten. Diese "Gottkomponenten" werden oft unhandlich, schwer zu warten, zu testen und wiederzuverwenden, was zu verlangsamten Entwicklungszyklen und einem erhöhten Fehlerrisiko führt. Dieser Artikel zielt darauf ab, dieses kritische Problem anzugehen, indem er praktische und effektive Strategien zur Dekomposition großer React- und Vue-Komponenten untersucht. Wir werden uns mit den leistungsstarken Techniken des Extrahierens von Custom Hooks/Composables und Unterkomponenten befassen und demonstrieren, wie diese Architekturmuster einen verwickelten Code in eine modulare, verständliche und skalierbare Einheit verwandeln können, die letztendlich die Entwicklerproduktivität und Anwendungsrobustheit verbessert.

Kernkonzepte und Strategien

Bevor wir uns mit den praktischen Strategien befassen, lassen Sie uns einige Kernbegriffe klären, die das Fundament der Komponentenzerlegung in React und Vue bilden.

Komponente: Der grundlegende Baustein sowohl in React als auch in Vue. Sie kapselt einen Teil der Benutzeroberfläche und die zugehörige Logik. Zustand (State): Daten, die eine Komponente intern verwaltet und die sich im Laufe der Zeit ändern können, was Neu-Renderings auslöst. Props: Unveränderliche Daten, die von einer übergeordneten Komponente an eine untergeordnete Komponente übergeben werden und die Kommunikation und Konfiguration ermöglichen. Seiteneffekte (Side Effects): Operationen, die mit der Außenwelt interagieren (z. B. Datenabruf, DOM-Manipulation, Abonnements) und typischerweise nach dem Rendering behandelt werden.

Custom Hooks (React) / Composables (Vue)

Custom Hooks in React und Composables in Vue sind leistungsstarke Mechanismen zur Extraktion zustandsbehafteter Logik aus Komponenten in wiederverwendbare Funktionen. Sie ermöglichen es Ihnen, zusammengehörige Logik, Zustände und Seiteneffekte zu kapseln, wodurch Komponenten sauberer und stärker auf das Rendern der Benutzeroberfläche fokussiert werden.

Prinzip: Identifizieren Sie wiederkehrende Logik, Zustandsverwaltung oder Seiteneffekte innerhalb einer Komponente. Diese Logik betrifft oft nicht direkt die Rendering-Verantwortung der Komponente.

Implementierung (React - Custom Hook):

Betrachten Sie eine große ProductDetails-Komponente, die das Abrufen von Produktdaten, die Verwaltung von Ladezuständen und die Verwaltung des Favoritenstatus übernimmt.

// Vorher: Große ProductDetails-Komponente
function ProductDetails({ productId }) {
  const [product, setProduct] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [isFavorite, setIsFavorite] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchProduct = async () => {
      setIsLoading(true);
      try {
        const response = await fetch(`/api/products/${productId}`);
        if (!response.ok) throw new Error('Failed to fetch product');
        const data = await response.json();
        setProduct(data);
        // Logik zum Prüfen, ob das Produkt ein Favorit ist, annehmen
        setIsFavorite(data.isFavoriteByUser);
      } catch (err) {
        setError(err.message);
      } finally {
        setIsLoading(false);
      }
    };
    fetchProduct();
  }, [productId]);

  const toggleFavorite = () => {
    // API-Aufruf zum Aktualisieren des Favoritenstatus
    setIsFavorite(prev => !prev);
  };

  if (isLoading) return <div>Loading product...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!product) return <div>Product not found.</div>;

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <button onClick={toggleFavorite}>
        {isFavorite ? 'Remove from Favorites' : 'Add to Favorites'}
      </button>
      {/* ... weitere UI-Elemente */}
    </div>
  );
}

Lassen Sie uns nun die Datenabruf- und Favoriten-Toggle-Logik in benutzerdefinierte Hooks extrahieren:

// Custom Hook: useProductData.js
import { useState, useEffect } from 'react';

function useProductData(productId) {
  const [product, setProduct] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchProduct = async () => {
      setIsLoading(true);
      setError(null);
      try {
        const response = await fetch(`/api/products/${productId}`);
        if (!response.ok) throw new Error('Failed to fetch product');
        const data = await response.json();
        setProduct(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setIsLoading(false);
      }
    };
    fetchProduct();
  }, [productId]);

  return { product, isLoading, error, setProduct };
}

// Custom Hook: useFavoriteToggle.js
import { useState } from 'react';

function useFavoriteToggle(initialIsFavorite) {
  const [isFavorite, setIsFavorite] = useState(initialIsFavorite);

  const toggleFavorite = async (productId) => { // productId könnte für den API-Aufruf benötigt werden
    // Simulieren des API-Aufrufs
    console.log(`Toggling favorite for product ID: ${productId}`);
    await new Promise(resolve => setTimeout(resolve, 500)); 
    setIsFavorite(prev => !prev);
    // In einer echten App würden Sie hier einen tatsächlichen API-Aufruf tätigen
  };

  return { isFavorite, toggleFavorite, setIsFavorite };
}

// Nachher: Überarbeitete ProductDetails-Komponente
function ProductDetails({ productId }) {
  const { product, isLoading, error, setProduct } = useProductData(productId);
  const { isFavorite, toggleFavorite } = useFavoriteToggle(product?.isFavoriteByUser || false); // Mit dem Favoritenstatus des Produkts initialisieren

  // Aktualisieren des Favoritenstatus des Produkts, wenn sich isFavorite ändert
  useEffect(() => {
    if (product) {
      setProduct(prev => ({ ...prev, isFavoriteByUser: isFavorite }));
    }
  }, [isFavorite, product, setProduct]);


  if (isLoading) return <div>Loading product...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!product) return <div>Product not found.</div>;

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <button onClick={() => toggleFavorite(productId)}>
        {isFavorite ? 'Remove from Favorites' : 'Add to Favorites'}
      </button>
      {/* ... weitere UI-Elemente */}
    </div>
  );
}

Implementierung (Vue - Composable):

Lassen Sie uns dasselbe Produktdetail-Szenario für Vue 3 mit der Composition API anpassen.

<!-- Vorher: Große ProductDetails-Komponente -->
<template>
  <div>
    <div v-if="isLoading">Loading product...</div>
    <div v-else-if="error">Error: {{ error }}</div>
    <div v-else-if="!product">Product not found.</div>
    <div v-else>
      <h1>{{ product.name }}</h1>
      <p>{{ product.description }}</p>
      <button @click="toggleFavorite">
        {{ isFavorite ? 'Remove from Favorites' : 'Add to Favorites' }}
      </button>
      <!-- ... weitere UI-Elemente -->
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';

const props = defineProps({
  productId: String,
});

const product = ref(null);
const isLoading = ref(true);
const isFavorite = ref(false);
const error = ref(null);

const fetchProduct = async () => {
  isLoading.value = true;
  error.value = null;
  try {
    const response = await fetch(`/api/products/${props.productId}`);
    if (!response.ok) throw new Error('Failed to fetch product');
    const data = await response.json();
    product.value = data;
    isFavorite.value = data.isFavoriteByUser;
  } catch (err) {
    error.value = err.message;
  } finally {
    isLoading.value = false;
  }
};

const toggleFavorite = async () => {
  // Simulieren des API-Aufrufs
  console.log(`Toggling favorite for product ID: ${props.productId}`);
  await new Promise(resolve => setTimeout(resolve, 500));
  isFavorite.value = !isFavorite.value;
  // In einer echten App würden Sie hier einen tatsächlichen API-Aufruf tätigen
};

onMounted(fetchProduct);
watch(() => props.productId, fetchProduct);
</script>

Nun die Extraktion der Logik in Composables:

// useProductData.js
import { ref, onMounted, watch } from 'vue';

export function useProductData(productIdRef) { // productIdRef ist ein ref
  const product = ref(null);
  const isLoading = ref(true);
  const error = ref(null);

  const fetchProduct = async () => {
    isLoading.value = true;
    error.value = null;
    try {
      const response = await fetch(`/api/products/${productIdRef.value}`);
      if (!response.ok) throw new Error('Failed to fetch product');
      const data = await response.json();
      product.value = data;
    } catch (err) {
      error.value = err.message;
    } finally {
      isLoading.value = false;
    }
  };

  onMounted(fetchProduct);
  watch(productIdRef, fetchProduct);

  return { product, isLoading, error, fetchProduct }; // fetchProduct exponieren, falls benötigt
}

// useFavoriteToggle.js
import { ref } from 'vue';

export function useFavoriteToggle(initialIsFavorite) {
  const isFavorite = ref(initialIsFavorite);

  const toggleFavorite = async (productId) => { // productId könnte für den API-Aufruf benötigt werden
    console.log(`Toggling favorite for product ID: ${productId}`);
    await new Promise(resolve => setTimeout(resolve, 500));
    isFavorite.value = !isFavorite.value;
    // Echter API-Aufruf hier
  };

  return { isFavorite, toggleFavorite };
}

// Nachher: Überarbeitete ProductDetails-Komponente
<template>
  <div>
    <div v-if="isLoading">Loading product...</div>
    <div v-else-if="error">Error: {{ error }}</div>
    <div v-else-if="!product">Product not found.</div>
    <div v-else>
      <h1>{{ product.name }}</h1>
      <p>{{ product.description }}</p>
      <button @click="toggleFavorite(productId)">
        {{ isFavorite ? 'Remove from Favorites' : 'Add to Favorites' }}
      </button>
      <!-- ... weitere UI-Elemente -->
    </div>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue';
import { useProductData } from './useProductData.js';
import { useFavoriteToggle } from './useFavoriteToggle.js';

const props = defineProps({
  productId: String,
});

const productIdRef = ref(props.productId); // Ein ref aus der Prop für das Composable erstellen

const { product, isLoading, error } = useProductData(productIdRef);
const { isFavorite, toggleFavorite } = useFavoriteToggle(product.value?.isFavoriteByUser || false);

// Auf Produktänderungen achten und initialIsFavorite für das Composable aktualisieren
// Dies ist ein gängiges Muster, wenn der anfängliche Composable-Zustand von asynchronen Daten abhängt
watchEffect(() => {
  if (product.value) {
    isFavorite.value = product.value.isFavoriteByUser;
  }
});

// Wenn sich das Produkt aktualisiert, sicherstellen, dass sich auch der Favoritenstatus im Produkt aktualisiert
watch(isFavorite, (newVal) => {
  if (product.value) {
    product.value.isFavoriteByUser = newVal;
  }
});
</script>

Composables/Custom Hooks sind ideal für:

  • Kapselung wiederverwendbarer Logik (z. B. Formularvalidierung, Datenabruf, Authentifizierung).
  • Verwaltung komplexer Zustände, die aus mehreren Quellen abgeleitet wurden.
  • Saubere Behandlung von Seiteneffekten, ohne die Rendering-Logik der Komponente zu überladen.

Kindkomponenten

Kindkomponenten sind eine weitere grundlegende Möglichkeit, große Komponenten zu zerlegen. Das Prinzip hier ist, die Benutzeroberfläche und ihre unmittelbare Logik basierend auf visuellen und logischen Grenzen aufzuteilen.

Prinzip: Suchen Sie nach verschiedenen Abschnitten im Rendering-Ergebnis einer Komponente. Wenn ein Abschnitt seinen eigenen Zustand (auch wenn minimal), Props oder komplexe Rendering-Logik hat, ist er ein Kandidat für eine Kindkomponente.

Implementierung (React):

Weiter mit dem ProductDetails-Beispiel, nehmen wir an, die Produktdetailansicht enthält auch einen ProductReview-Abschnitt und einen AddToCartButton.

// Vorher: Alles in ProductDetails
function ProductDetails({ productId }) {
  // ... Datenabruf und Favoriten-Toggle-Logik wie zuvor ...

  if (isLoading) return <div>Loading product...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!product) return <div>Product not found.</div>;

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <button onClick={() => toggleFavorite(productId)}>
        {isFavorite ? 'Remove from Favorites' : 'Add to Favorites'}
      </button>

      {/* Produktbewertungsabschnitt direkt hier */}      <h2>Reviews</h2>
      {product.reviews.length > 0 ? (
        <ul>
          {product.reviews.map(review => (
            <li key={review.id}>
              <strong>{review.author}</strong> - {review.rating}/5
              <p>{review.comment}</p>
            </li>
          ))}
        </ul>
      ) : (
        <p>No reviews yet.</p>
      )}

      {/* In den Warenkorb-Abschnitt direkt hier einfügen */}      <button onClick={() => alert(`Added ${product.name} to cart!`)}>
        Add to Cart
      </button>
    </div>
  );
}

Extrahieren Sie nun ProductReviews und AddToCartButton als Kindkomponenten:

// ProductReviews.jsx
function ProductReviews({ reviews }) {
  if (reviews.length === 0) {
    return <p>No reviews yet.</p>;
  }
  return (
    <div>
      <h2>Reviews</h2>
      <ul>
        {reviews.map(review => (
          <li key={review.id}>
            <strong>{review.author}</strong> - {review.rating}/5
            <p>{review.comment}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

// AddToCartButton.jsx
function AddToCartButton({ productName, onAddToCart }) {
  return (
    <button onClick={onAddToCart}>
      Add {productName} to Cart
    </button>
  );
}

// Nachher: Überarbeitete ProductDetails-Komponente
function ProductDetails({ productId }) {
  const { product, isLoading, error } = useProductData(productId);
  const { isFavorite, toggleFavorite } = useFavoriteToggle(product?.isFavoriteByUser || false);

  // ... useEffect zum Synchronisieren des Favoritenstatus wie zuvor ...

  if (isLoading) return <div>Loading product...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!product) return <div>Product not found.</div>;

  const handleAddToCart = () => {
    alert(`Added ${product.name} to cart!`);
    // In einer echten App eine Aktion an einen Warenkorb-Store senden
  };

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <button onClick={() => toggleFavorite(productId)}>
        {isFavorite ? 'Remove from Favorites' : 'Add to Favorites'}
      </button>

      <ProductReviews reviews={product.reviews || []} />
      <AddToCartButton productName={product.name} onAddToCart={handleAddToCart} />
    </div>
  );
}

Implementierung (Vue):

<!-- Vorher: Alles in ProductDetails (ähnlich dem React-Beispiel, aber mit Vue-Template-Syntax) -->
<!-- Gleiches wie im vorherigen Vue-Beispiel, aber stellen Sie sich vor, Bewertungen und Warenkorb-Logik sind direkt in seiner Vorlage enthalten -->

<!-- ProductReviews.vue -->
<template>
  <div>
    <h2>Reviews</h2>
    <ul v-if="reviews.length > 0">
      <li v-for="review in reviews" :key="review.id">
        <strong>{{ review.author }}</strong> - {{ review.rating }}/5
        <p>{{ review.comment }}</p>
      </li>
    </ul>
    <p v-else>No reviews yet.</p>
  </div>
</template>

<script setup>
defineProps({
  reviews: {
    type: Array,
    default: () => [],
  },
});
</script>

<!-- AddToCartButton.vue -->
<template>
  <button @click="handleClick">
    Add {{ productName }} to Cart
  </button>
</template>

<script setup>
const props = defineProps({
  productName: String,
});
const emit = defineEmits(['add-to-cart']);

const handleClick = () => {
  emit('add-to-cart', props.productName);
};
</script>

<!-- Nachher: Überarbeitete ProductDetails-Komponente -->
<template>
  <div>
    <div v-if="isLoading">Loading product...</div>
    <div v-else-if="error">Error: {{ error }}</div>
    <div v-else-if="!product">Product not found.</div>
    <div v-else>
      <h1>{{ product.name }}</h1>
      <p>{{ product.description }}</p>
      <button @click="toggleFavorite(productId)">
        {{ isFavorite ? 'Remove from Favorites' : 'Add to Favorites' }}
      </button>

      <ProductReviews :reviews="product.reviews || []" />
      <AddToCartButton :product-name="product.name" @add-to-cart="handleAddToCart" />
    </div>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue';
import { useProductData } from './useProductData.js';
import { useFavoriteToggle } from './useFavoriteToggle.js';
import ProductReviews from './ProductReviews.vue';
import AddToCartButton from './AddToCartButton.vue';

const props = defineProps({
  productId: String,
});

const productIdRef = ref(props.productId);

const { product, isLoading, error } = useProductData(productIdRef);
const { isFavorite, toggleFavorite } = useFavoriteToggle(product.value?.isFavoriteByUser || false);

watchEffect(() => {
  if (product.value) {
    isFavorite.value = product.value.isFavoriteByUser;
  }
});
watch(isFavorite, (newVal) => {
  if (product.value) {
    product.value.isFavoriteByUser = newVal;
  }
});

const handleAddToCart = (productName) => {
  alert(`Added ${productName} to cart!`);
  // Aktion an Warenkorb-Store senden
};
</script>

Kindkomponenten sind effektiv für:

  • Verbesserung der Lesbarkeit durch Abstraktion komplexer Benutzeroberflächenblöcke.
  • Ermöglichung der Wiederverwendbarkeit von UI-Elementen in verschiedenen Teilen der Anwendung.
  • Optimierung der Rendering-Leistung (Reacts memo oder Vues inhärente Reaktivität kann unnötige Neu-Renderings von Kindkomponenten verhindern, wenn sich ihre Props nicht geändert haben).
  • Erzwingung der Trennung von Zuständigkeiten, wobei jede Komponente eine klare Verantwortung hat.

Wann welche verwenden?

  • Custom Hooks/Composables sind für die Wiederverwendung von Logik und die Trennung von Zuständigkeiten in Bezug auf Daten und Verhalten. Sie rendern nichts direkt, stellen aber Zustände und Funktionen bereit.
  • Kindkomponenten sind für die Wiederverwendung von Benutzeroberflächen und die Trennung von Zuständigkeiten in Bezug auf die Darstellung. Sie kapseln einen Teil der visuellen Benutzeroberfläche.

Oft werden Sie beides zusammen verwenden. Eine Kindkomponente kann einen benutzerdefinierten Hook/Composable für ihre interne Logik nutzen und so die Modularität weiter verbessern.

Fazit

Die Zerlegung großer React- und Vue-Komponenten in kleinere, fokussierte Einheiten mit Custom Hooks/Composables und Kindkomponenten ist keine reine Stilfrage; es ist eine grundlegende Praxis für die Erstellung wartbarer, skalierbarer und qualitativ hochwertiger Frontend-Anwendungen. Durch die konsequente Anwendung dieser Strategien können Entwickler saubereren Code, einfacheres Debugging, verbesserte Wiederverwendbarkeit und verbesserte Zusammenarbeit innerhalb von Teams erzielen, was letztendlich zu einer robusteren und angenehmeren Benutzererfahrung führt. Beherrschen Sie diese Dekompositionstechniken, um monolithische Komponenten in ein harmonisches Orchester modularer Teile zu verwandeln.

Share this article

HackerNews

More Posts from Leapcell

Popular Posts