Javascript 试图理解在React.js中传递的数据

我想了解在下面的React.js示例中从父组件传递到子组件属性的内容（我正在学习tic-tac-toe教程）：

类Square扩展了React.Component{
render（）{
返回(
this.props.onClick（）}>
{this.props.value}
);
}
}

然后有一个板组件，它执行此操作以渲染每个正方形：

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

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

renderSquare（一）{
返回这个.handleClick（i）}/>；
}
handleClick（一）{
const squares=this.state.squares.slice（）；
正方形[i]=“X”；
this.setState（{squares:squares}）；
}

正方形是保存在板状态下的数组

电路板的渲染功能如下所示：

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

render（）{
常量状态='下一个玩家：X'；
返回(
{状态}
{this.renderSquare（0）}
{this.renderSquare（1）}
{this.renderSquare（2）}
{this.renderSquare（3）}
{this.renderSquare（4）}
{this.renderSquare（5）}
{this.renderSquare（6）}
{this.renderSquare（7）}
{this.renderSquare（8）}
);
}
}

handleClick更新板中的方形阵列，但似乎不接触方形。从我对传统Java/C++程序员的观点来看，这似乎有点不可靠，我正在寻找类似于通过引用传递与通过值传递的东西。关于这里发生的事情，我唯一能猜到的是，在调用handleClick之后，会再次调用Board的render函数，这就是如何将新的square[I]数据值传递给square组件。因此，在这一点上，正方形是用一组新的道具渲染的，但状态与以前相同。对吗

即使我的理解是正确的，这也是我真正想要思考我将要编写的代码的方式。我还对React.js的控制流的更多细节感到好奇：我应该在什么时候再次调用组件的render（）？父调用的呈现是否呈现它所具有的所有子调用？我很好奇，如果父组件被重新渲染，是否所有旧的子组件都会被销毁，然后构建并渲染一个新的集合？如果没有，React.js如何知道哪个调用与哪个Square对象关联

我对如何理解这篇文章或关于这一主题的具有良好类比/描述的文章感兴趣。即使只是一些关于如何描述这里发生的事情的行话，也能帮助我在谷歌上搜索。谢谢大家

---

完整示例

只要组件脏了，即其道具或状态更改，React就会重新呈现组件及其子组件

在您的情况下，通过调用

setState（）

，您可以更改电路板组件的状态，并因此触发该组件及其所有子组件的渲染

---

请注意，这并不一定意味着删除和替换所有DOM元素，因为React可能会出于性能原因重用它们。但是，此过程由React库为您抽象出来。

React在组件变脏时（即其道具或状态更改时）重新呈现组件及其子组件

在您的情况下，通过调用

setState（）

，您可以更改电路板组件的状态，并因此触发该组件及其所有子组件的渲染

---

请注意，这并不一定意味着删除和替换所有DOM元素，因为React可能会出于性能原因重用它们。然而，React库为您抽象出了这个过程。

好问题！你的要求是正确的，我可以告诉你，你将在很短的时间内对反应有很强的把握。您似乎需要一些帮助来更好地理解组件生命周期和单向数据绑定的美妙之处。我将列出一些您可能会找到帮助的资源，我将尽力回答您下面的具体问题

这是一篇关于组件生命周期的好文章：

另一个伟大的资源/工具是Redux。它不仅是一个很好的调试工具，而且还可以帮助您学习，因为它可以更容易地可视化幕后发生的事情

Redux:

问题与答案：

1） 。。。想知道关于React.js的控制流的更多细节吗

创建组件实例并将其插入DOM时，将按以下顺序调用以下方法：

• 构造函数（）
• 组件willmount（）
• render（）
• componentdidmount（）

在重新渲染组件时调用以下方法：

• componentWillReceiveProps（）
• shouldComponentUpdate（）
• render（）
• componentDidUpdate（）

2） 什么时候应该再次调用组件的render（）

很难给你一个明确的说法，因为这里有很多因素在起作用。通常，当需要从远程端点加载数据、更改Props的值（可能触发状态更改）以及更改状态时，会调用render（）。换句话说，当某些内容发生更改或更新并且需要DOM操作时，我们可能会重新渲染

3） 父调用的呈现是否呈现其所有子调用

4） 如果重新渲染父组件，是否会销毁所有旧的子组件

---

这里的3和4是非常相似的问题。使用setState时，不仅当前组件将执行渲染，而且还将是所有嵌套组件。但如果嵌套组件执行设置状态，则不会影响父组件。根据我的理解，除非指定ComponentWillUnmount（）或执行清理操作，否则子组件不会被销毁。

好问题！你问的是对的，我看得出来

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