純渲染元素沒有變化呈現ReactJS

Question

下面是代碼示例：

http://codepen.io/anon/pen/mVpVXW

如果你打開控制檯，然後輸入到任何輸入字段，你會發現render方法爲FormTextbox已更改的組件是唯一被調用的組件，但FormElement組件中的所有十個組件的render方法均被調用，即使其中只有一個組件的子組發生了更改。

爲什麼要調用所有FormElement組件中的render方法，其中9個組件沒有任何更改，並且它正在使用Pure Render Mixin（並且子組件也使用Pure Render Mixin）？

Answer 1

我相信這可以按預期工作，因爲您正在編寫組件。 PureRender通過檢查道具是否相同來工作;但是，由於您通過props.children傳遞，所以prop等價性檢查將失敗（JavaScript中的對象/數組等效性是一件棘手的事情），因此組件將被重新呈現。它的子樹是而不是更新，因爲它有原始道具沒有改變。

---

爲了證明這一點，看看this updated Pen，我明確地覆蓋shouldComponentUpdate。事實上，您會在日誌中看到比較this.props.children == nextProps.children是false。

從PureRender Docs：

這隻淺比較的對象。如果這些包含複雜的數據結構，則可能會對更深的差異產生假陰性結果。

（強調我的）