试图了解React.js中传递的数据

Question

我想了解的是什么，从父组件在下面的例子React.js（我通过工作的子组件的属性通过这个井字棋教程）：

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

然后有一个板子组件可以渲染每个正方形：

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

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

handleClick可以在看似未触及Square的情况下更新Board中的squares数组。 从我传统的Java / C ++程序员的角度来看，这似乎有些奇怪，我正在寻找类似“传递引用”与“传递值”之类的东西。 我唯一可以猜测的是，在调用handleClick之后，再次调用了Board的render函数，这就是将新的square [i]数据值传递给Square组件的方式。 因此，在这一点上，Square呈现了一组新的道具，但状态与以前相同。 那是对的吗？

即使我的理解是正确的，这也是我实际上正在尝试的想法 ，以此来思考我将要编写的代码。 我还对React.js的控制流的更多细节感到好奇：我什么时候可以期望组件的render（）被再次调用？ 父调用的渲染是否会渲染它拥有的所有子对象？ 我很好奇是否重新渲染了父级，是否所有旧的子级组件都被破坏了，然后构造并渲染了一个新的集合？ 如果没有，React.js如何知道哪个调用与哪个Square对象一起进行？

我对有关如何理解本主题的任何建议或具有与此主题的良好类比/描述的文章感兴趣。 即使只是一些关于如何描述这里发生的事情的行话，也会对我自己的谷歌搜索有所帮助。 谢谢大家！

完整的例子在这里

Answer 1

好问题！ 您在问正确的事情，我可以告诉您，您将在很短的时间内对React有所了解。 看来您可以使用一些帮助来更好地了解组件的生命周期和单向数据绑定的美妙之处。 我将列出一些资源，您可能会从中找到帮助，并且我将尽力在下面回答您的特定问题。

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

http://busypeoples.github.io/post/react-component-lifecycle/

另一个很棒的资源/工具是Redux。 它不仅是调试的好工具，而且还可以帮助您学习，因为它使可视化幕后情况变得更加容易。

Redux： https : //github.com/reactjs/redux

问题和答案：

1）...对React.js控制流程的更多细节感到好奇

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

• 构造函数（）
• componentWillMount（）
• render（）
• compnentDidMount（）

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

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

2）我什么时候可以期望再次调用render（）组件？

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

3）父调用的渲染是否会渲染其拥有的所有子对象？

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

3和4是非常相似的问题。 使用setState时，不仅将使用当前组件进行渲染，还将使用所有嵌套组件。 但是，如果嵌套组件执行setState，则不会影响父组件。 据我了解，除非您指定compoentWillUnmount（）或通过执行清理操作，否则子组件不会被销毁。

Answer 2

每当组件变脏（即其道具或状态发生变化）时，React都会重新渲染该组件及其子组件。

在您的情况下，通过调用setState() ，可以更改电路板组件的状态，并因此触发其及其所有子级的呈现。

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