开始学习React——跟着官网做井字棋

官网教程

入门教程: 用 React 做井字棋游戏
React 概念学习

代码

基础部分：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

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

class Board extends React.Component {
  renderSquare(i) {
    return (
      <Square
        value={this.props.squares[i]}
        onClick={() => this.props.onClick(i)}
      />
    );
  }
  render() {
    return (
      <div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      history: [{
        squares: Array(9).fill(null),
      }],
      xIsNext: true,
      stepNumber: 0,
    }
  }

  handleClick(i) {
    const history = this.state.history.slice(0, this.state.stepNumber + 1);
    const current = history[history.length - 1];
    const squares = current.squares.slice();
    if (calculateWinner(squares) || squares[i])
      return;
    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
      history: history.concat([{squares: squares}]),
      xIsNext: !this.state.xIsNext,
      stepNumber: history.length,
    });
  }

  jumpTo(step) {
    this.setState({
      stepNumber: step,
      xIsNext: step % 2 === 0,
    })
  }

  render() {
    const history = this.state.history;
    const current = history[this.state.stepNumber];
    const winner = calculateWinner(current.squares);
    let status;
    if (winner) {
      status = 'Winner: ' + winner;
    }
    else {
      status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
    }

    const moves = history.map((step, move) => {
      const desc = move ? 
        'Go to move #' + move :
        'Go to game start';
      return (
        <li>
          <button onClick={() => this.jumpTo(move)}>{desc}</button>
        </li>
      )
    });

    return (
      <div className="game">
        <div className="game-board">
          <Board 
            squares={current.squares}
            onClick={(i) => this.handleClick(i)}
          />
        </div>
        <div className="game-info">
          <div>{status}</div>
          <ol>{moves}</ol>
        </div>
      </div>
    );
  }
}

// ========================================
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Game />);

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

进一步完善：

1. 历史记录中添加坐标显示

在 history 中添加 coordinate 属性，初值设为 ‘’

history: [{
        squares: Array(9).fill(null),
        coordinate: '',
      }],
1
2
3
4

在处理点击时生成坐标并更新到 history 中

let coordinate = squares[i] + '(' + parseInt(i/3) + ',' + (i%3) + ')';
1

在渲染历史记录时添加坐标显示

const desc = (move ? 'Go to move #' + move : 'Go to game start') 
				+ ' ' + step.coordinate;
1
2

2. 在历史记录列表中加粗显示当前选项

在确定moves列表元素时判断索引与stepNumber是否一致，据此设置样式

const moves = history.map((step, move) => {
      const desc = (move ? 
        'Go to move #' + move :
        'Go to game start') + ' ' + step.coordinate;
      let textStyle = {};
      if (move === this.state.stepNumber) {
        if (winner) textStyle = {color: 'red', fontWeight: 'bold'};
        else textStyle = {fontWeight: 'bold'};
      }
      return (
        <li>
          <button onClick={() => this.jumpTo(move)} style={textStyle}>{desc}</button>
        </li>
      )
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3. 双重循环渲染棋盘

将 Board 的 render 函数修改为循环表示

render() {
    let board = [];
    for (let i = 0; i < 3; i++) {
      let row = [];
      for (let j = 0; j < 3; j++) 
        row.push(this.renderSquare(i*3+j));
      board.push(<div className='board-row'>{row}</div>)
    }
    return <div>{board}</div>;
  }
1
2
3
4
5
6
7
8
9
10

利用数组内置的 map 函数可以得到更简短的写法

render() {
    return <div>{
      [0, 1, 2].map(
        (i) => <div className='board-row'>{
            [0, 1, 2].map((j) => this.renderSquare(i*3+j))
          }</div>
      )
    }</div>;
  }
1
2
3
4
5
6
7
8
9

4. 添加历史记录正反序按钮

在 Game 的 state 中添加 order 属性，初始化为 false

this.state = {
      history: [{
        squares: Array(9).fill(null),
        coordinate: '',
      }],
      xIsNext: true,
      stepNumber: 0,
      order: false,
    }
1
2
3
4
5
6
7
8
9

生成历史记录数组时根据 order 来判断是否翻转数组

if (this.state.order) moves.reverse();
1

添加改变顺序的按钮，绑定对应函数

<button onClick={() => this.changeOrder()}>{this.state.order?'▲':'▼'}</button>
1

changeOrder() {
    this.setState({
      order: !this.state.order,
    })
  }
1
2
3
4
5

5. 高亮连成一线的三颗棋子

修改 calculateWinner，使其返回连线三棋子的位置信息

if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return {player: squares[a], position: lines[i]};
    }
1
2
3

当检测到胜利时保存信息

let status, highlights=[];
    if (winner) {
      status = 'Winner: ' + winner.player;
      highlights = winner.position;
    }
1
2
3
4
5

将该信息传入 Board 组件中

<Board 
            squares={current.squares}
            onClick={(i) => this.handleClick(i)}
            highlights={highlights}
          />
1
2
3
4
5

在调用 Square 组件时判断对应位置是否应高亮并传入该判断

renderSquare(i) {
    return (
      <Square
        value={this.props.squares[i]}
        onClick={() => this.props.onClick(i)}
        highlight={this.props.highlights.includes(i)}
      />
    );
  }
1
2
3
4
5
6
7
8
9

根据高亮信息调整按钮内容样式

function Square(props) {
  let style = null;
  if (props.highlight) style = {color: 'red'};
  return (
    <button className="square" onClick={props.onClick} style={style}>
      {props.value}
    </button>
  );
}
1
2
3
4
5
6
7
8
9

6. 无人获胜时显示平局

非常简单，只需判断 stepNumber 到第九步时是否有人获胜，没人获胜就更改 status 显示平局信息

if (winner) {
  status = 'Winner: ' + winner.player;
  highlights = winner.position;
}
else if (this.state.stepNumber < 9) {
  status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
}
else status = 'It\'s a tie!';
1
2
3
4
5
6
7
8

完整代码

放在 github仓库 里了。