react setState() 更新浏览器中的所有组件
react setState() update all components in browser
我有一个巨大的表格 built 反应和 material-ui。该表单使用 双向绑定 并更新输入更改的状态。更改任何输入字段 会导致所有组件更新 e（通过启用 React 开发人员工具 TraceReactUpdate 很明显）。当涉及到 TextField 时，它使我的页面 呈现速度非常慢 。使用 this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this) 没有帮助。
发现上述问题可能非常困难，因为它完全取决于您编写的实际代码。我确信 React 渲染概念是有效的（就像它对我自己和许多其他人一样），但如果没有看到更多代码，就不可能查明实际问题。
不过，我觉得真正的原因是 "simple"，这意味着很可能是由于传递了一个 prop 确实发生了变化。也许不是价值，而是实例。 IIRC，PurerenderMixin 不比较值（除非数据是值类型），它比较实例。所以即使数据相同，如果实例发生变化，它也会重新渲染。
需要考虑的一些关键点：
- 您是只将需要的 props 传递给每个组件，还是将所有 props 都传递给它们？
- 数据结构是不可变的吗？
- 你确定你没有传递在迭代中发生变化的数据吗，比如传递 javascript [] 作为道具将意味着数据已经改变（参见 https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f#.hx97qk4tx 上的示例这怎么会搞砸你的一天）。
如果您明确地为组件创建一个 shouldComponentUpdate() 方法，那么您可以自己控制它。 PureRenderMixin 会进行浅层检查以查看 props 是否已更改，但是，如果您将它们全部传递，那么无论它们是否已在 render 方法中使用，那么只有其中一个更改将意味着该组件被认为是需要渲染（例如，不是挂载，而是在内存中渲染，并与 dom 协调可能的更改）。使用 shouldComponentUpdate 可以帮助根据您自己的检查停止渲染。
使用不可变属性也很有帮助。如前所述，React PureRenderMixin 仅进行浅层比较。因此，如果您在具有深度的道具（如子属性）中传递数据结构，则不会检查这些。这意味着您 可能 会遇到与现在相反的问题，即应该更新但没有更新的组件。如果您正在使用即 redux 并且已经完成 "the right thing" 并且正在使用即 Immutable.js，那么使用 PureRenderMixin 就足够了。
为此阅读特定文档可能有帮助，也可能没有帮助。 React 手册对此有一些很好的描述：https://facebook.github.io/react/docs/advanced-performance.html#shouldcomponentupdate-in-action
而且 - 我忘了说，如果您使用的是 redux，那么您可以考虑使用这些稍微优雅和简单的方式来处理您的表单：
希望这对您有所帮助。祝你好运。
我有一个巨大的表格 built 反应和 material-ui。该表单使用 双向绑定 并更新输入更改的状态。更改任何输入字段 会导致所有组件更新 e（通过启用 React 开发人员工具 TraceReactUpdate 很明显）。当涉及到 TextField 时，它使我的页面 呈现速度非常慢 。使用 this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this) 没有帮助。
发现上述问题可能非常困难，因为它完全取决于您编写的实际代码。我确信 React 渲染概念是有效的（就像它对我自己和许多其他人一样），但如果没有看到更多代码，就不可能查明实际问题。
不过，我觉得真正的原因是 "simple"，这意味着很可能是由于传递了一个 prop 确实发生了变化。也许不是价值，而是实例。 IIRC，PurerenderMixin 不比较值（除非数据是值类型），它比较实例。所以即使数据相同，如果实例发生变化，它也会重新渲染。
需要考虑的一些关键点：
- 您是只将需要的 props 传递给每个组件，还是将所有 props 都传递给它们？
- 数据结构是不可变的吗？
- 你确定你没有传递在迭代中发生变化的数据吗，比如传递 javascript [] 作为道具将意味着数据已经改变（参见 https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f#.hx97qk4tx 上的示例这怎么会搞砸你的一天）。
如果您明确地为组件创建一个 shouldComponentUpdate() 方法，那么您可以自己控制它。 PureRenderMixin 会进行浅层检查以查看 props 是否已更改，但是，如果您将它们全部传递，那么无论它们是否已在 render 方法中使用，那么只有其中一个更改将意味着该组件被认为是需要渲染（例如，不是挂载，而是在内存中渲染，并与 dom 协调可能的更改）。使用 shouldComponentUpdate 可以帮助根据您自己的检查停止渲染。
使用不可变属性也很有帮助。如前所述，React PureRenderMixin 仅进行浅层比较。因此，如果您在具有深度的道具（如子属性）中传递数据结构，则不会检查这些。这意味着您 可能 会遇到与现在相反的问题，即应该更新但没有更新的组件。如果您正在使用即 redux 并且已经完成 "the right thing" 并且正在使用即 Immutable.js，那么使用 PureRenderMixin 就足够了。
为此阅读特定文档可能有帮助，也可能没有帮助。 React 手册对此有一些很好的描述：https://facebook.github.io/react/docs/advanced-performance.html#shouldcomponentupdate-in-action
而且 - 我忘了说，如果您使用的是 redux，那么您可以考虑使用这些稍微优雅和简单的方式来处理您的表单：
希望这对您有所帮助。祝你好运。