Membina Permainan Pokémon SOLID dalam React: Pengembaraan Pembangun!-tutorial js-php.cn

Membina Permainan Pokémon SOLID dalam React: Pengembaraan Pembangun!

Mary-Kate Olsen

Lepaskan： 2024-11-10 00:54:02

asal

268 orang telah melayarinya

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

S: Tanggungjawab Tunggal - Satu Pokémon, Satu Pekerjaan

Masalah: PokemonComponent mengendalikan penangkapan, bertarung dan memaparkan markah, melanggar 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>
  );
}

Salin selepas log masuk

Penyelesaian: Pisahkan tanggungjawab.

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

Salin selepas log masuk

O: Terbuka/Tertutup - Komponen Pokémon yang Berkembang

Masalah: Menambah ciri seperti peningkatan kuasa memerlukan pengubahsuaian komponen sedia ada.

Penyelesaian: Gunakan Komponen Pesanan Tinggi (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 />;
}

Salin selepas log masuk

L: Penggantian Liskov - Pokémon Boleh Ditukar

Masalah: Pertukaran komponen menyebabkan masalah.

Penyelesaian: Gunakan komponen asas.

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

Salin selepas log masuk

D: Penyongsangan Ketergantungan - Bergantung pada Abstraksi

Masalah: Komponen berganding rapat dengan sumber data.

Penyelesaian: Gunakan konteks untuk suntikan data.

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

Salin selepas log masuk

Cheatssheet: Prinsip PADAT

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.

Atas ialah kandungan terperinci Membina Permainan Pokémon SOLID dalam React: Pengembaraan Pembangun!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!