Construire un jeu Pokémon SOLIDE dans React : une aventure de développeur !-js tutoriel-php.cn

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

Mary-Kate Olsen

Libérer： 2024-11-10 00:54:02

original

267 Les gens l'ont consulté

Building a SOLID Pokémon Game in React: A Developer’s Adventure!

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>
  );
}

Copier après la connexion

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>
  );
}

Copier après la connexion

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 />;
}

Copier après la connexion

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>
  );
}

Copier après la connexion

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>

Copier après la connexion

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!