Question

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

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

square是一个保存在棋盘状态的数组。

董事会的渲染功能如下：

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更新了Board中的正方形数组而没有看似触及Square。从我对传统Java / C ++程序员的观点来看，这似乎有点不可思议，我在寻找像pass-by-reference和pass-by-value这样的东西。我唯一可以猜到的是，在调用handleClick之后，再次调用Board的渲染函数，这就是新square [i]数据值传递给Square组件的方式。所以在这一点上，Square使用一组新的道具进行渲染，但之前的状态与之前相同。这是对的吗？

即使我的理解是正确的，也是我真正想要解决的问题思考关于代码I＆＃的方式＃＆＃ 39;我要去写。我还对有关React.js控制流的更多细节感到好奇：我应该什么时候再次调用组件的render（）？并且渲染了它拥有的所有孩子的父调用渲染吗？我很好奇是否重新渲染父级，是否所有旧的子组件都被销毁，然后构建并渲染一个新的组件？如果没有，React.js如何知道哪个调用与哪个Square对象有关？

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

完整示例here

Answer 1

好问题！你问的是正确的事情，我可以告诉你，你将在短时间内掌握React。看起来您可以使用一些帮助来更好地理解组件生命周期和单向数据绑定的美感。我会列出一些您可能会找到帮助的资源，我会尽力回答下面的具体问题。

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

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

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

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

问题＆amp;回答：

1）......对有关React.js
控制流程的更多细节感到好奇
当创建组件的实例并将其插入DOM时，将按以下顺序调用以下方法：

构造（）

componentWillMount（）

渲染（）

compnentDidMount（）

重新渲染组件时会调用这些方法：

componentWillReceiveProps（）

shouldComponentUpdate（）

渲染（）

componentDidUpdate（）

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

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

3）父调用的渲染是否渲染了它拥有的所有子节点？

4）如果父项被重新渲染，那么所有旧的子组件都会被销毁吗？

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

Answer 2

当组件及其子组件变脏时，它会重新呈现组件及其子组件，即其道具或状态发生更改。

在您的情况下，通过调用<option ng-repeat="n in [].constructor(24) track by $index" value="{{$index}}">{{$index>9?$index:"0"+$index}}:00</option>，您可以更改电路板组件的状态，并因此触发对其及其所有子项的渲染。

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

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

2 个答案: