React性能优化篇之memo,useMemo,useCallback是否有必要每个函数和组件都包起来

669 阅读3分钟

本人已参与「新人创作礼」活动,一起开启掘金创作之路。

是否有必要在任何情况下都缓存所有的函数和组件

我个人的观点是否定的。不是所有情况下都需要把所有的函数和组件都进行缓存。

让我们冷静思考一下:如果说每个组件都用memo包一下,每个函数都用useCallBack/useMemo包一下对项目有着绝对的好处,那为什么react为什么不直接把这三个缓存技术做成默认的??为什么呢?很显然react没有做成默认的效果,就是因为这三个缓存技术如果每个组件每个函数都使用的话可能会给你的项目带来毁灭性打击。

毕竟,缓存是需要成本的呀!!

我们拿useCallback举个例子。useCallBack的功能是检测依赖,再依赖不变的情况下不重写函数。那请问:它是如何知道我这个依赖是否有变动呢?底层是需要循环检测所有useCallBack的依赖是否被更改的。

假设我们有两个组件,两个组件内一共有10个函数使用了useCallBack。那当我们组件进行更新的时候。是否需要去遍历10个函数检测这10个函数的依赖是否被更新呢?

现在我们的例子里面只有10个函数,但一个项目中的函数可远不止10个。尤其是开发大型项目的时候,如果我的项目中有5000个函数呢?10000个函数呢。遍历需要成本,每一次遍历的检测也需要成本。

举个例子(还是拿useCallBack举个例子) 假设,是假设奥。组件重新渲染构建的时候会去调用useCallBack

假设缓存1000个函数,遍历校对函数是否被更改的成本是0.1秒。而缓存当前组件函数所能带来的收益是0.2秒。0.2>0.1,显然,当前缓存全部函数所带来的收益大于缓存技术本身的消耗。可以全部缓存。

但如果我缓存10000个函数。遍历校对函数是否被更改的成本是1秒,而缓存当前组件函数所能带来的收益依然是0.2秒。0.2<1,这个时候,缓存所能带来的收益,就不高了。

useMemo和Memo也是同样的道理。

所以,就我我个人观点来说,我不认为所有的函数和组件都有被缓存的必要。是否需要全部缓存,根据项目情况而定。

关于在什么情况下使用这三种缓存技术

我个人的观点是

首先看项目体量

如果一个项目不大,所需要缓存的个数不多。大体上就是函数不超过2000个。每个函数都缓存一下倒是也没什么问题。在本身缓存成本不大的情况下,将每个函数都缓存确实有助于项目的优化。

如果我们开发的项目很大,所需要缓存的函数非常之多。可能会有很多很多个,当全部缓存的成本远大于我们缓存函数所带来的收益时候。我们就可以考虑有选择的缓存一些拥有复杂且庞大的函数,一些简单的函数不予缓存,这样对我们的项目来说,收益最大,负担最小。

总结

是否缓存全部函数和组件,取决于项目的体量。

大项目,所需要缓存的函数很多。缓存的成本大于缓存带来的受益,则选择部分拥有复杂计算的函数去缓存。

小项目,所需要缓存的函数本身就不多,全部缓存也不会给项目带来什么大负担,则可以进行全部缓存。