在 React 中构建一款可靠的 Pokémon 游戏：开发者的冒险！-js教程-PHP中文网

在 React 中构建一款可靠的 Pokémon 游戏：开发者的冒险！

聖光之護

发布： 2024-11-09 10:27:29

转载

473人浏览过

在 react 中构建一款可靠的 pokémon 游戏：开发者的冒险！

s：单一职责 - 一只神奇宝贝，一份工作

问题：pokemoncomponent 处理捕捉、战斗和显示分数，违反了 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>
  );
}

登录后复制

解决方案：责任划分。

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：开放/封闭 - 进化的神奇宝贝组件

问题：添加电源等功能需要修改现有组件。

解决方案：使用高阶组件（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：里氏替换 - 可互换的神奇宝贝

问题：交换组件会导致问题。

行者AI

行者AI绘图创作，唤醒新的灵感，创造更多可能

100

查看详情

解决方案：使用基础组件。

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：依赖倒置 - 依赖于抽象

问题：组件与数据源紧密耦合。

解决方案：使用上下文进行数据注入。

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

登录后复制

备忘单：坚实的原则

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.