纯渲染元素渲染，无需更改ReactJS

Question

以下是代码示例：

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

如果打开控制台并输入任何输入字段，您会注意到已更改的render组件的FormTextbox方法是唯一被调用的方法，但{ {1}}所有render个组件的方法都被调用，即使其中只有一个组件的子项发生了变化。

为什么所有FormElement组件的render方法在其中9个组件没有任何更改时被调用，并且它使用Pure Render Mixin（并且子组件也使用Pure Render Mixin） ）？

Answer 1

我相信这是按预期工作的，因为你正在编写组件。 PureRender通过检查道具是否相同来工作;但是，由于您使用props.children传递，因此prop等价检查将失败（JavaScript中的对象/数组等效是一项棘手的事务），因此重新呈现该组件。它的子树是不更新，因为它有原始道具没有改变。

要获得证明，请查看我明确覆盖shouldComponentUpdate的{​​{3}}。实际上，您会在日志中看到比较this.props.children == nextProps.children false 。

来自this updated Pen：

  

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

（强调我的）