Construire un jeu Pokémon SOLIDE dans React : une aventure de développeur !

S : Responsabilité unique – Un Pokémon, un travail

Problème : PokemonComponent gère la capture, le combat et l'affichage des scores, violant ainsi le 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>
  );
}

Solution : Répartir les responsabilités.

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 : Ouvert/Fermé – Composants Pokémon évolutifs

Problème : L'ajout de fonctionnalités telles que des mises sous tension nécessite de modifier les composants existants.

Solution : utilisez un composant d'ordre supérieur (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 : Substitution Liskov – Le Pokémon Interchangeable

Problème : L'échange de composants entraîne des problèmes.

Solution : Utiliser un composant de base.

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 : Inversion de dépendance – Dépend des abstractions

Problème : Composants étroitement couplés aux sources de données.

Solution : Utiliser le contexte pour l'injection de données.

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

Aide-mémoire : principes SOLID

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!