看react的文档教程的第四天

这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战」

我很菜,是个垃圾作者,我就是想记录一下学了什么,知耻而后勇.很感谢掘金这个平台,写文章不用花钱. 今天继续看react文档,文章的绝大多数都是来自于官方文档,我能有的仅仅是加上我粗浅的理解,作为我自己的学习笔记.

开发者工具

文档介绍了开发者工具,在我的脑海中就想到了,Chrome浏览器的控制台,果然是这个样子,让我去安装React Devtools Chrome的扩展,小白嘛,最重要的就是听话.

我就可以在 React DevTools 中检查 React 组件的 state 和 props,让我来试一下.

有效果,接下来开始完善游戏,我们需要O和X交替出现并且需要轮流下棋,然后让程序来自动判断是否成功赢得了游戏. 那么我们先完成第一个小目标,修改代码使得轮流下棋,且轮流落子.

当你遇到需要同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，需要把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。这样应用当中所有组件的状态数据就能够更方便地同步共享了。 board 添加构造函数

constructor(props) {    
super(props);    
this.state = {      
squares: Array(9).fill(null),    
};  }

在这里我们声明了一个数组9个值的,因为我们的井字棋有九个格子 一开始，我们依次使把 0 到 8 的值通过 prop 从 Board [向下传递]，从而让它们显示出来。上一步与此不同，我们根据 Square 自己内部的 state，使用了 “X” 来代替之前的数字。因此，Square 忽略了当前从 Board 传递给它的那个 value prop。这也就是说明,儿子如果没有能力,就啃老,如果有能力,就自力更生. 我们通过修改 Board 的 renderSquare 方法来读取这些值了。

  renderSquare(i) {
    return <Square value={this.state.squares[i]} />;  }

我们还需要给这个方法添加一个监听事件,

handleClick(i) {    
const squares = this.state.squares.slice();    
squares[i] = 'X';    
this.setState({squares: squares});  
}

轮流落子

现在井字棋还有一个明显的缺陷有待完善：目前还不能在棋盘上标记 “O” 修改borad的构造函数,添加一个布尔值,xIsNext: true,,用来轮流落子,当调用一次后,仅仅是需要这个布尔值取反就可以. 现在整个的 Board 组件的代码应该是下面这样的：

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: Array(9).fill(null),
      xIsNext: true,    };
  }

  handleClick(i) {
    const squares = this.state.squares.slice();    squares[i] = this.state.xIsNext ? 'X' : 'O';    this.setState({      squares: squares,      xIsNext: !this.state.xIsNext,    });  }

  renderSquare(i) {
    return (
      <Square
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}
      />
    );
  }

  render() {
    const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
    return (
      <div>
        <div className="status">{status}</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>
    );
  }
}

在最后,真的觉得他们好聪明啊,判断谁先谁后,仅仅是让一个值取反就好了.