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

Question

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

如果我使用大多数功能组件构建React应用程序,而不是基于类的有状态组件(可以访问生命周期钩子),我是否放弃了这种特定的优化？我可以在功能组件内执行类似的检查吗？

Answer 1

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

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

资源

但是,目前,如果props不变,则无状态组件不会通过跳过渲染过程来优化性能.反应团队成员证实了这一点:

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

[...]

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

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

资源

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