javascript - 试图理解 React.js 中传递的数据

Question

我想了解在以下 React.js 示例中从父组件传递到子组件属性的内容(我正在学习 this 井字游戏教程):

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是棋盘状态中保存的数组。

board的render函数是这样的:

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 中的 squares 数组，但似乎没有触及 Square。从我的传统 Java/C++ 程序员的 Angular 来看，这似乎有点奇怪，我正在寻找类似按引用传递与按值传递的东西。关于这里发生的事情，我唯一能猜到的是在调用 handleClick 之后，再次调用 Board 的 render 函数，这就是新的 square[i] 数据值如何传递给 Square 组件的方式。所以在那一点上，Square 被渲染了一组新的 Prop ，但状态与之前相同。对吗？

即使我的理解是正确的，这也是我真正想要围绕着思考我将要编写的代码的一种方式。我也很好奇关于 React.js 控制流的更多细节:我应该什么时候期望组件的 render() 再次被调用？父调用的渲染是否渲染了它拥有的所有子级？我很好奇是否重新渲染了父组件，是否所有旧的子组件都被销毁，然后构建并渲染了一个新组件？如果不是，React.js 如何知道哪个调用对应哪个 Square 对象？

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

完整示例 here

Answer 1

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

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

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

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

终极版: https://github.com/reactjs/redux

问题与解答:

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

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

• 构造函数()
• componentWillMount()
• 呈现()
• compnentDidMount()

这些方法在重新渲染组件时被调用:

• componentWillReceiveProps()
• shouldComponentUpdate()
• 呈现()
• componentDidUpdate()

2) 什么时候应该再次调用组件的 render()？

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

3) 父调用的渲染是否渲染了它拥有的所有子级？

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

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