Question

我是编码新手并且已经使用JS完成了一些在线课程，目前我正在阅读ReactJS Tic Tac Toe教程（here）。我理解一般逻辑，但是对于Board类中的构造函数正在做什么感到困惑：

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

  renderSquare(i) {
    return <Square value={i} />;
  }

  render() {
    const status = 'Next player: X';

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

根据我的理解，它正在初始化电路板和电路板状态，但是当我调整代码并改变空数组中定义的方块数时，它不会改变电路板/游戏的功能。但是，如果我删除了数组，代码会崩溃。构造函数的目的是什么？为什么更改数组长度不等于板上的方块数不会影响游戏，但不包括数组呢？

Answer 1

这里的构造函数在超级调用中设置了反应组件的props和初始状态。

您实际上从未在任何地方引用状态变量。每次调用render square时，您只需使用该索引渲染一个新的方形组件。没有神奇的幕后连接。

Answer 2

在组件中使用state之前，需要初始化state对象。要初始化state，请将属性state设置为类中的纯JavaScript对象＆＃39;构造方法。例如：

import React, {Component} from react;

class SearchBar extends Component {
    constructor(props)
    super(props)

    this.state = {term: ' '};

    render() {
    return <input onChange={event => console.log(event.target.value)} />;
    }
}

这是我们在基于类的组件中初始化state的方法。

所有JavaScript类都有一个名为constructor的特殊函数。 constructor函数是第一个也是唯一一个在创建类的新实例时自动调用的函数。

组件本身有自己的constructor功能。当我们定义一个已经在父类上定义的方法Component时，我们通过调用super在父类上调用该父方法。

每当我们使用state时，我们通过创建一个新对象并将其分配this.state来初始化它，我们传递的对象也将包含我们要在state上记录的属性，在你的情况下是squares:。

您可以在此处了解更多信息：https://reactjs.org/docs/react-component.html#constructor

ReactJS Tic Tac Toe教程 - 构造函数目的

2 个答案: