通过 shouldComponentUpdate 对无状态、功能性组件进行 React 优化

IT技术 javascript reactjs
2021-05-21 22:54:27

我知道 React 优化的一个关键点是使用shouldComponentUpdate()生命周期钩子根据下一个/状态props检查当前状态/props。

如果我正在构建一个 React 应用程序,主要使用功能组件,而不是基于类的、有状态的组件(可以访问生命周期钩子),我是否放弃了这种特殊的优化?我可以在功能组件内部执行类似的检查吗?

1个回答

无状态组件是未来优化的候选者,文档中没有详细说明:

在理想的世界中,您的大多数组件都是无状态函数,因为将来我们还可以通过避免不必要的检查和内存分配来针对这些组件进行性能优化。如果可能,这是推荐的模式。

来源


然而,目前,如果 props 不变,无状态组件不会通过跳过渲染过程来优化性能。React 团队的一名成员已经证实了这一点:

对于复杂的组件,定义shouldComponentUpdate(例如纯渲染)通常会超过无状态组件的性能优势。文档中的句子暗示了我们计划的一些未来优化,我们不会为无状态功能组件分配内部实例(我们只会调用该函数)。我们也可能不会继续持有props等。微小的优化。我们不讨论文档中的细节,因为优化还没有真正实现(无状态组件为这些优化打开了大门)。

[...]

pureRender关于在函数上设置标志或允许它参与 shouldUpdate 生命周期的讨论,但目前尚未实现。目前,无状态函数不能是纯渲染的。

值得记住的是,有时人们会滥用/过度使用纯渲染;它有时可能比再次运行渲染更昂贵,因为您正在迭代props数组并可能执行字符串比较之类的操作,这对于最终返回 true 然后继续重新渲染的组件来说只是额外的工作。PureRender /shouldComponentUpdate真的被认为是性能的逃生舱,并不一定应该盲目地应用于每个组件。

来源


我从这次讨论中得出的结论是,在某些复杂组件的情况下,shouldComponentUpdate与无状态组件相比,可以通过实现来提高性能另一方面,我会强烈考虑性能优势是否足以超过组件增加的复杂性和更大的占用空间。