纯渲染元素没有变化呈现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：

这只浅比较的对象。如果这些包含复杂的数据结构，则可能会对更深的差异产生假阴性结果。

（强调我的）