了解React渲染

问题描述:

React组件在其父组件呈现时始终运行其渲染方法,即使子组件没有状态或道具更改(即使子组件没有状态或道具),也似乎始终运行它们的渲染方法。了解React渲染

这应该是?这有没有效率低下?将子组件切换到PureComponent可修复此问题,并且子组件不会reRender。我应该比普通组件更青睐PureComponents吗?

+0

PureComponents更容易出错。反应文档的一般建议是在任何地方使用Component,并且仅在解决实际性能问题时才使用PureComponent,并且仅在其用法实际上提高性能时使用PureComponent。我现在找不到源代码的链接。 –

+0

来自PureComponent文档:“如果您的React组件的render()函数在给定相同的道具和状态的情况下呈现相同的结果,则可以在某些情况下使用React.PureComponent来提高性能。” “If”对我来说很有意思......当一切都一样时,渲染函数是否应该运行?或者,在使用常规组件时,应该不使用状态或道具的愚蠢组件不会重新渲染。常规组件如何决定何时渲染? –

+0

父组件中的任何更改都会首先呈现子组件,然后再呈现父组件。如果您认为父组件状态或道具不应该影响子组件,请使用shouldComponentUpdate函数。如果您不需要组件的本地状态,则纯组件非常有用。 –

如果您想控制什么使组件重新生成,那么您应该使用shouldComponentUpdate,它可以用于所有反应组件,除非它们是无状态的功能组件。 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

+0

谢谢,我明白功能,我只是想明白,如果我应该打扰控制重新渲染?我是否应该试图尽量减少不需要重新渲染的组件的重新渲染? –

+1

这确实取决于您的使用情况和应用程序。如果性能不是问题,并且您没有非常复杂的用户界面,则可能不值得花时间进行投资。如果组件的UI复杂,可能会呈现大量DOM元素,那么绝对值得花时间和避免无用的重新渲染。在我工作的地方,我们只是真的在有问题的组件上使用它,并且不会花时间在较小的组件上来实现它,但我确定有其他人将它放在一切只取决于您的使用情况 – finalfreq

+0

谢谢,这很有帮助。我刚刚阅读了一些文档,阐明了render方法实际上并不意味着重新渲染实际的DOM。 React仍然将渲染的虚拟DOM元素与真实事物进行比较,以确定是否需要在UI中呈现。 –