反應兒童渲染程序

Question

我對兒童反應中的東西有疑問。我知道有些文件可以說明這件事，但確切的解釋可能會更好。

比方說，我的反應組件樹是這樣的。（爲簡單起見，僅添加了2級能更）

  A 
    A1  A2 
A11 A12 A21 A22 

一個有2個孩子A1和A2兩者有2個孩子，如圖所示。 （孩子如同樹結構不反應孩子的事）。

現在組件A22是依賴於一個只需要從A道具應該重新呈現基於由A.

現在給出的道具來解決，我這樣做，我呈現在A22一個這樣

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

現在酷A2是A22反應樹明智的父母，但呈現由A.做

1. 現在，任何人都可以解釋順序的方式生命週期方法會發生在A，A2，A22。

2. 如果A2重新渲染會導致A22重新渲染，會發生什麼情況。

3. 如果A重新呈現但沒有A2更改的道具可以說它的shouldComponent更新會阻止更新，在這種情況下會發生關於A22的情況。

Answer 1

我等了一天，然後試圖找到一個解決方案，只是想我的一個朋友告訴我試試看，找到自己。

所以我檢查了一些東西。

1. 的生命週期方法訂購。

找到第一個最簡單的東西就是找到組件實例化和渲染的順序。之後我們可以在狀態改變的情況下重新渲染時發現事情的發展。

（這是jsfiddle的鏈接）。

所以我的組件樹只是這樣。

  A 
    A1  A2 
A11  A21 A22 

和A22呈現在A，但作爲孩子A2並最終將其放入反應樹通過。

所以我就如上述結果。有點奇怪，我認爲A實例化了A22，但它在A2和A21之後被實例化了。 所以基本上我們可以說A22可能是由A實例化的，但它是以DFS形式完成的，因此在實例化A2之後，只有A22被創建。

現在好吧，讓我們添加所有的生命週期方法，並找出更多。

哦，這是新的信息A1被實例化，在安裝開始並呈現前A2但A1後的A1 didMount發生了，所有的孩子們呈現（OK會發現更多關於它）。

好現在，讓我們檢查一下A22的重新渲染和A.

發生的第三件事是對的一切內容的狀態變化的生命週期方法重新呈現和順序無關與A22寫在A中代替A2。

現在讓我們看看Pure組件。

加入pureComponent後（shouldComponentUpdate = this.props！== nextProps）

A1樹不重新呈現。 A2重新渲染A22重新渲染。由於A22消耗了變化的狀態。和A2重新呈現，因爲孩子們撐起改變（我猜），在這裏也A2 receiveProps並作爲反應樹仍然沒有寫作A22的效果A.

一個疑問，如果左邊是A22重新渲染恰好發生在A2之後渲染，然後在A2 props.children中更改。在渲染A2之後更改A22。

的jsfiddle（https://jsfiddle.net/mersL9hk/3/）的最後一個環節