javascript - 没有变化的纯渲染元素渲染 ReactJS

Question

这是代码示例:

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

如果您打开控制台并在任何输入字段中键入内容，您会注意到 FormTextbox 组件的 render 方法是唯一发生变化的方法这被调用了，但是所有十个 FormElement 组件的 render 方法都被调用，即使只有其中一个有一个子组件发生了变化。

为什么要调用所有 FormElement 组件的 render 方法，而其中 9 个组件没有任何变化并且它正在使用 Pure Render Mixin(和子组件)还使用 Pure Render Mixin)？

Answer 1

我相信这会按预期工作，因为您正在组合组件。 PureRender 通过检查 Prop 是否相同来工作；但是，由于您使用 props.children 传递，prop 等价性检查将失败(JavaScript 中的对象/数组等价性是一件棘手的事情)，因此组件将被重新渲染。它的子树未更新，因为它具有未更改的原始 Prop 。

---

有关证明，请查看 this updated Pen我在其中明确覆盖了 shouldComponentUpdate。事实上，您会在日志中看到比较 this.props.children == nextProps.children 是 false。

来自PureRender Docs :

This only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences.

(强调我的)