React JS：理解状态

Question

我是 react JS 的初学者，正在尝试完成他们在其网站上提供的井字游戏教程，但我很难理解如何通过代码更改状态。

这是游戏使用的 2 个组件的 sn-p：

class Square extends React.Component {

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

class Board extends React.Component {

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

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

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

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

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
//this.renderSquare is called 7 more times to create the board 
- left out to make code here look slightly more concise

        </div>
    );
  }
}

以下是我不明白的地方： 首先调用 renderSquare，传入 0 作为 i 的参数。然后调用 square 组件，传入两个属性 - value 和 onClick。我只是不明白正方形组件中发生了什么。 onClick 被分配了在 renderSquare 的 return 语句中声明的匿名函数，但是如何/何时调用 onClick？我不太确定 onClick() 在这种情况下是如何工作的。

我在这里阅读过关于状态的类似问题，但我不理解给出的解释。任何帮助，将不胜感激。

Answer 1

<Square> 呈现一些 HTML，如您在 Square 类中所见。该 HTML 包含一个带有 prop 的 div 元素：onClick={()=>this.props.onClick()} React 会将其转换为标准的 Javascript onclick 事件。当用户单击 div 时调用的单击处理程序是作为 onClick 属性传递给 Square 组件的任何函数：在本例中为 this.handleClick(i)（其中 i 的值已传递到renderSquare 函数）。到目前为止和我在一起？

当this.handleClick(i)被调用时，它使用setState将this.state.squares[i]的值设置为'X'。该值在每个 Square (value={this.state.squares[i]}) 内被拾取，并由 {this.props.value} 在 Square 内渲染。因此，当用户点击一个正方形时，正方形内会呈现一个 X。

我希望这可以澄清事情！

Answer 2

但是如何/何时调用 onClick？

只要在浏览器中单击 Square，就会调用onClick。

更具体地说，当调用 Square 组件中按钮中的 onClick 时，将调用 onClick。

class Square extends React.Component {

   render() 
  {
    return (
      <button className="square"
        // here!
        onClick={() => this.props.onClick()}
        >
      {this.props.value} 
      </button>
    );
  }
}

这个button.onClick 是一个React 提供的函数，它与按钮的onclick 方法挂钩，就像普通的javascript 一样。

Answer 3

所以要充分解释这里发生的事情，首先要了解为什么尽可能将组件逻辑保留在父组件中很重要。这样做是为了让 square 组件在未来更具可重用性，因为 square 组件的工作只是渲染简单的 html 而无需担心其他任何事情。

所以当你去渲染正方形时，我们实际上是在传递父组件函数作为道具：

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

现在想象一下，如果 square 是一个函数，它所接受的参数是一个函数，它基本上看起来像这样

function Square(onClick) {
  //so now you have access to the parents "handleClick" method
}

这是上面的一个提炼示例，但实际上它会在 props 对象中，因此您可以在示例中使用 this.props.onClick 访问它。所以当正方形被点击时，它会像this.props.onClick()一样运行函数。请记住，这是调用传递给 square 的父组件 handleClick 方法。 i 也缓存在函数调用中，因此如果您单击第 6 个方块，其索引将为 5。因此，当它设置状态时，它将第 6 个方块（数组中的 5 个索引）的状态设置为 ' x' 在父组件中。

现在，由于设置了状态，组件将根据生命周期方法在 React 中的工作方式重新渲染。所以它会循环遍历存储的每个状态，并将该值传递给它应该显示的方块。

编辑：另外，如果您想知道反应中给您的事件，我建议您阅读这两个：

https://reactjs.org/docs/events.html https://reactjs.org/docs/handling-events.html