了解 React 渲染答案

【问题标题】：Understanding React Rendering了解 React 渲染
【发布时间】：2017-05-31 13:35:37
【问题描述】：

似乎 React 组件总是在其父组件渲染时运行其 render 方法，即使子组件没有更改状态或道具，即使子组件没有状态或道具。

这是应该的吗？这有没有效率低下？将子组件切换为 PureComponent 可以解决此问题，并且子组件不会重新渲染。我应该更喜欢 PureComponents 而不是常规组件吗？

【问题讨论】：

PureComponents 更容易出错。 React 文档的一般建议是在任何地方都使用 Component，并且仅在解决实际性能问题并且仅在其使用实际提高性能时才使用 PureComponent。我现在找不到源链接。
来自 PureComponent 文档：“如果你的 React 组件的 render() 函数在给定相同的 props 和 state 的情况下呈现相同的结果，那么在某些情况下你可以使用 React.PureComponent 来提高性能。” “如果”对我来说很有趣......渲染功能是否应该在一切都相同时运行？或者在使用常规组件时，不应该重新渲染没有状态或道具的哑组件。常规组件如何决定何时渲染？
父组件中的任何更改都会先渲染子组件，然后再渲染父组件。如果您认为父组件状态或道具不应该影响子组件，请使用 shouldComponentUpdate 函数。如果您不需要组件的本地状态，则纯组件很有用。

【解决方案1】：

如果您想控制组件重新渲染的原因，那么您应该使用shouldComponentUpdate，它可以用于所有 React 组件，除非它们是无状态功能组件。 PureComponent 基本上自动使用shouldComponentUpdate，并对过去和当前的道具/状态进行浅层检查，如果有变化，它将重新渲染。

有时您可能正在处理更复杂的数据结构并希望自己控制shouldComponentUpdate，在这种情况下，只需按照此处的生命周期方法说明进行操作即可。

https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate

这里也是 PureComponent 的信息

https://facebook.github.io/react/docs/react-api.html#react.purecomponent

【讨论】：

谢谢，我了解该功能，我只是想了解是否应该费心控制重新渲染？我应该养成尽量减少不需要重新渲染的组件的重新渲染的习惯吗？
这真的取决于您的用例和应用程序。如果性能不是问题，并且您没有非常复杂的 UI，则可能不值得花时间投资。如果您有一个复杂的 UI，其中的组件可能会渲染大量 DOM 元素，那么绝对值得花时间并防止无用的重新渲染。在我工作的地方，我们只在有问题的组件上真正使用它，并且不会花时间在较小的组件上来实现它，但我相信还有其他人将它放在一切上，这取决于你的用例
谢谢，很有帮助。我刚刚阅读了一些文档，这些文档阐明了渲染方法实际上并不意味着重新渲染实际的 DOM。 React 仍然会将渲染的虚拟 DOM 元素与真实事物进行比较，以确定它是否需要在 UI 中渲染。