React 儿童渲染过程答案

【问题标题】：React children rendering procedureReact 儿童渲染过程
【发布时间】：2017-10-10 07:12:26
【问题描述】：

我对反应中的儿童内容有疑问。我知道有文件可以说明这件事，但准确的解释可能会更好。

假设我的 react 组件树是这样的。（为简单起见只添加了 2 个级别可能更多）

         A
    A1       A2
 A11 A12   A21 A22

A 有 2 个孩子 A1 和 A2，并且都有 2 个孩子，如图所示。（作为树结构的孩子不会对孩子做出反应）。

现在组件 A22 依赖于 A 只是它从 A 获取 props 并且应该根据 A 给定的 props 重新渲染。

现在要解决我这样做的问题，我像这样在 A 中渲染 A22

render(){
    return (
      <otherThing/>
      <A2>
         <A22 {propsForA22}/>
      </A2>
    );
}

现在很酷，A2 是 A22 的父级反应树，但渲染是由 A 完成的。

【问题讨论】：

【解决方案1】：

我等了一天，而不是仅仅想着我的一个朋友告诉我尝试一下并自己找到解决方案。

所以我检查了一些东西。

生命周期方法的顺序。

首先要找到最简单的方法是找到组件实例化和渲染的顺序。稍后我们可以找到在状态更改时重新渲染的情况。

（这是 jsfiddle 的链接）。

所以我的组件树只有这样。

         A
   A1       A2
A11       A21 A22

A22 在 A 中渲染，但作为子项传递给 A2，A2 最终将其放入反应树中。

所以我得到了如上的结果。有点奇怪，我以为 A 正在实例化 A22，但它是在 A2 和 A21 之后实例化的。所以基本上我们可以说 A22 可能是由 A 实例化的，但它是以 DFS 形式完成的，所以在实例化 A2 之后只有 A22 被创建。

好的，现在让我们添加所有生命周期方法并了解更多。

哦，这是 A1 已实例化、安装开始并在 A2 之前渲染的新信息，但 A1 didMount 发生在 A1 之后，并且它的所有子级都已渲染（好的，会找到更多相关信息）。

好的，现在让我们检查一下 A22 和 A 的重新渲染。

发生的第三件事是 A 的状态更改的生命周期方法，所有内容都重新渲染，并且顺序与 A22 被写入 A 代替 A2 无关。

现在让我们看看 Pure 组件。

添加pureComponent后(shouldComponentUpdate = this.props!==nextProps)

A1 树不会重新渲染。 A2 重新渲染 A22 重新渲染。由于 A22 正在消耗更改的状态。并且 A2 重新渲染是因为 children 道具发生了变化（我猜），而且这里 A2 的 receiveProps 和渲染也完全像反应树一样发生，在 A 中写入 A22 仍然没有效果。

如果 A22 在 A2 之后重新渲染，那么 A2 中的变化还有一个疑问道具.儿童。 A2 渲染后 A22 发生变化。

【讨论】：