React入门 4: 重构 [抬起篇]

1 年 ago

雅, 悟

1 minute

首先

我希望通过多次的文章使用React来开发井字游戏 (即三子棋)，这样既可以对自己进行复习，也可作为备忘录的意义。

CodeSandbox(非公式)

系列清单

React入门2：棋盘的创建
React入门3：交互操作的实现
React入门4：重构[提升状态篇]（此次）
React入门5：重构[交互操作篇]
React入门6：实现轮次
React入门7：游戏胜利判定
React入门8：实现文本
React入门9：时间旅行（1）
React入门10：时间旅行（2）
React入门11：时间旅行（3）

关于目的的问题

整体的目标

我们将使用3×3的方格来实现在React公式教程中公开的井字游戏。

这次的目标是什么?

为了进行游戏胜利判定，我们将通过更改程序来使得我们能够通过Board组件了解每个格子的状态。

重构

重构（Refactoring）是指以下几个意思。

ソースコードを管理しやすいものへと修正すること

您可以在下一页上查看上次的源文件。

前回の内容はコチラから！

管理组件用于管理马斯的状态。

在这里，我们将回顾当前的程序。

Board コンポーネントと Square コンポーネントは親子関係にある (第2回の記事を参照)

Board コンポーネントが9つの Square コンポーネントを呼び出している

9つのマスの状態は Square コンポーネントによってそれぞれ制御されている

マスの状態は state 型の value 変数が示す

为了判断胜利条件是否成立，需要获取棋盘即所有方格的状态。因此，我们将改变程序，使方格的状态能够在父组件的棋盘组件中进行管理。这种重构被称为提升。

为了提升面具的状态，让我们在App.js中进行以下更改。

Square コンポーネントの変更

state 型の value 変数を削除する
プロパティとして value を追加する

handleClick() 関数を削除する

Board コンポーネントの変更

state 型の squares 配列を宣言する

配列の要素数は9個とし、各要素の初期値は null とする

setSquares という関数を呼び出すと squares 配列を更新できるようにする

各 Square コンポーネントの value プロパティに squares 配列の要素を渡す

import { useState } from "react";
import "./styles.css";

function Square({ value }) {
  return <button className="square">{value}</button>;
}

export default function Board() {
  const [squares, setSquares] = useState(Array(9).fill(null));

  return (
    <>
      <div className="board-row">
        <Square value={squares[0]} />
        <Square value={squares[1]} />
        <Square value={squares[2]} />
      </div>
      <div className="board-row">
        <Square value={squares[3]} />
        <Square value={squares[4]} />
        <Square value={squares[5]} />
      </div>
      <div className="board-row">
        <Square value={squares[6]} />
        <Square value={squares[7]} />
        <Square value={squares[8]} />
      </div>
    </>
  );
}

以下是操作的结果。由于在Square组件中进行了更改，删除了

举例说明提升效果

关于状态变量，下面列举了可能进行升级的场景。

当需要获取多个子组件的信息时

我用黑白棋来比喻各种场面。

另外，进行的井字游戏举起是为了”想要从多个Square组件获取方块的信息”，因此属于第二个场景。在这种情况下，可以在父组件中声明状态变量或数组，并在调用子组件时通过属性传递信息。

最后

这次我们修改了代码，使得我们可以在 Board 组件中管理棋盘的状态。下一页展示了当前阶段的源代码文件。

下一次，我们将重新实施在这次的重构中丢失的鼠标点击交互。