javascript - React setState() 更新浏览器中的所有组件

Question

我正在使用 React 和 Material-ui 构建一个巨大的表单。该表单使用双向绑定(bind)并更新输入更改的状态。更改任何输入字段都会导致所有组件更新(通过启用 React 开发工具 TraceReactUpdate 可以明显看出)。当涉及到 TextField 时，它会使我的页面渲染速度非常慢。使用 this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this) 没有帮助。

Answer 1

查找上述问题可能非常困难，因为这完全取决于您编写的实际代码。我确信 react 渲染概念是有效的(就像我自己和其他许多人一样)，但如果没有看到更多代码，就不可能查明实际问题。

不过，我有一种感觉，真正的原因很“简单”，这意味着很可能是由于传递的 Prop 已经确实发生了变化。也许不是值(value)，而是实例。 IIRC，PurerenderMixin 不是比较值(除非数据是值类型)，而是比较实例。因此，即使数据相同，如果实例发生更改，也会重新渲染。

需要考虑的一些关键点:

• 您是只将所需的 props 传递给每个组件，还是将所有 props 传递给所有组件？
• 数据结构是不可变的吗？
• 您确定您没有传递在迭代中发生变化的数据吗？例如将 javascript [] 作为 prop 传递将意味着数据已更改(请参阅 https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f#.hx97qk4tx 示例了解这会如​​何搞砸您的一天) .

如果您为组件显式创建一个 shouldComponentUpdate() 方法，那么您可以自己控制它。 PureRenderMixin 会进行浅层检查以查看 Prop 是否已更改，但是，如果您将它们全部传递，那么无论它们是否已在渲染方法中使用，那么只有其中一个更改将意味着该组件被视为需要渲染(例如，不是挂载，而是在内存中渲染并与 dom 协调可能的更改)。使用 shouldComponentUpdate 可以帮助根据您自己的检查停止渲染。

使用不可变的 props 也很有帮助。如前所述，React PureRenderMixin 仅进行浅层比较。因此，如果您在具有深度的 props 中传递数据结构(如子属性)，则不会检查这些数据结构。这意味着您可能最终会遇到与现在相反的问题，即组件应该更新但没有更新。如果您正在使用 redux 并做了“正确的事情”并且正在使用 Immutable.js，那么使用 PureRenderMixin 就足够了。

阅读具体文档可能有帮助，也可能没有帮助。 React 手册对此有一些很好的描述:https://facebook.github.io/react/docs/advanced-performance.html#shouldcomponentupdate-in-action

而且 - 我忘了说，如果您正在使用 redux，那么您可以考虑这些稍微优雅且简单的方式来处理表单:

• http://redux-form.com/
• https://davidkpiano.github.io/react-redux-form/

希望这有帮助。祝你好运。