Erstellen Sie ein SOLIDES Pokémon-Spiel in React: Das Abenteuer eines Entwicklers!

S: Eine einzige Verantwortung – ein Pokémon, ein Job

Problem: PokemonComponent kümmert sich um das Fangen, Kämpfen und Anzeigen von Ergebnissen und verstößt gegen SRP.

function PokemonComponent({ pokemon, onCatch, onBattle, score }) {
  return (
    <div>
      <h2>{pokemon.name}</h2>
      <button onClick={() => onCatch(pokemon)}>Catch</button>
      <button onClick={() => onBattle(pokemon)}>Battle</button>
      <div>Score: {score}</div>
    </div>
  );
}

Lösung: Verantwortlichkeiten aufteilen.

function PokemonCatcher({ pokemon, onCatch }) {
  return <button onClick={() => onCatch(pokemon)}>Catch</button>;
}
function PokemonBattler({ pokemon, onBattle }) {
  return <button onClick={() => onBattle(pokemon)}>Battle</button>;
}
function ScoreBoard({ score }) {
  return <div>Score: {score}</div>;
}
function PokemonGame({ pokemon, onCatch, onBattle, score }) {
  return (
    <div>
      <h2>{pokemon.name}</h2>
      <PokemonCatcher pokemon={pokemon} onCatch={onCatch} />
      <PokemonBattler pokemon={pokemon} onBattle={onBattle} />
      <ScoreBoard score={score} />
    </div>
  );
}

O: Offen/Geschlossen – Sich entwickelnde Pokémon-Komponenten

Problem: Das Hinzufügen von Funktionen wie Power-Ups erfordert die Änderung bestehender Komponenten.

Lösung: Verwenden Sie eine Komponente höherer Ordnung (HOC).

function withPowerUp(PokemonComponent) {
  return function PoweredUpComponent(props) {
    const [isPoweredUp, setPowerUp] = useState(false);
    const powerUp = () => {
      setPowerUp(true);
      setTimeout(() => setPowerUp(false), 5000);
    };
    return (
      <div>
        <PokemonComponent {...props} isPoweredUp={isPoweredUp} />
        <button onClick={powerUp}>Power Up!</button>
      </div>
    );
  };
}

const Charmander = ({ isPoweredUp }) => (
  <div>Charmander {isPoweredUp && "(Powered Up!)"}</div>
);

const PoweredCharmander = withPowerUp(Charmander);

function PokemonApp() {
  return <PoweredCharmander />;
}

L: Liskov-Ersatz – Das austauschbare Pokémon

Problem: Der Austausch von Komponenten verursacht Probleme.

Lösung: Verwenden Sie eine Basiskomponente.

function BasePokemon({ attack, children }) {
  return (
    <div className="pokemon">
      <div>Attack: {attack}</div>
      {children}
    </div>
  );
}
function Pikachu({ attack }) {
  return (
    <BasePokemon attack={attack}>
      <h2>Pikachu</h2>
    </BasePokemon>
  );
}
function Charizard({ attack }) {
  return (
    <BasePokemon attack={attack}>
      <h2>Charizard</h2>
    </BasePokemon>
  );
}
function PokemonBattle() {
  return (
    <div>
      <BasePokemon attack="Tackle">
        <h2>Generic Pokémon</h2>
      </BasePokemon>
      <Pikachu attack="Thunderbolt" />
      <Charizard attack="Flamethrower" />
    </div>
  );
}

D: Abhängigkeitsumkehr – Abhängig von Abstraktionen

Problem: Komponenten sind eng mit Datenquellen verbunden.

Lösung: Verwenden Sie den Kontext für die Dateninjektion.

const PokemonContext = createContext();
function Pikachu() {
  const { attack } = useContext(PokemonContext);
}
<PokemonContext.Provider value={{ attack: "Thunderbolt" }}>
  <Pikachu />
</PokemonContext.Provider>

Spickzettel: SOLID-Prinzipien

Principle	Poké-Mantra	Trainer’s Tip
Single Responsibility	One Pokémon, one role.	Split complex components into focused ones.
Open/Closed	Evolve without changing.	Use HOCs, render props for new features.
Liskov Substitution	Components like Pokémon moves - interchangeable.	Ensure components can be used interchangeably.
Dependency Inversion	Depend on abstractions, not concretes.	Use context or props for data management.

Das obige ist der detaillierte Inhalt vonErstellen Sie ein SOLIDES Pokémon-Spiel in React: Das Abenteuer eines Entwicklers!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!