Question

我怀疑儿童的反应。我知道有些文件可以说明这件事，但确切的解释可能会更好。

让我们说我的反应组件树是这样的。（为简单起见，只添加了2个级别可能更多）

         A
    A1       A2
 A11 A12   A21 A22

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

现在组件A22依赖于A只有从A获取道具并且应该根据A给出的道具重新渲染。

现在为了解决这个问题我在A中渲染A22就像这样

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

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

Answer 1

我等了一天而不是试图找到一个解决方案只是想我的一个朋友告诉我试一试并找到自己。

所以我查了一下。

生命周期方法的顺序。

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

（这是jsfiddle的链接）。

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

         A
   A1       A2
A11       A21 A22

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

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

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

哦这是A1实例化的新信息，安装开始并在A2之前呈现，但A1 didMount发生在A1之后并且所有子项都被渲染（确定会找到更多关于它的信息）。

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

发生的第三件事是关于A重新渲染的状态变化的生命周期方法，并且顺序与用A写入A22代替A2无关。

现在让我们看看Pure组件。

添加pureComponent后（shouldComponentUpdate = this.props！== nextProps）

A1树不会重新渲染。 A2重新渲染A22重新渲染。由于A22消耗了变化的状态。和A2重新渲染，因为子道具改变了（我猜），这里也有A2 receiveProps和渲染发生，因为反应树仍然没有在A中写A22的效果。

如果A22在A2之后重新渲染，那么剩下一个疑问则是A2中的变化 props.children。渲染A2后更改A22。