考虑使用 useMemo/useCallback 计算量大的时间限制答案

【问题标题】：Time limit to consider as computationally expensive for using useMemo/useCallback考虑使用 useMemo/useCallback 计算量大的时间限制
【发布时间】：2023-01-15 10:47:39
【问题描述】：

根据包括React docs 在内的数十篇文章，使用useCallback 和useMemo 钩子有助于防止不必要的重新渲染。

另一方面，这些性能优化挂钩不是免费的，而是需要付费的。他们的收益可能并不总能抵消该成本。以便

大多数时候你不应该费心去优化不必要的重新渲染

说Kent C. Dodds。

所以应该有一个工具来衡量一个函数/变量是否计算成本高并且不能是相对的（例如，在前后放置console.time()和console.timeEnd()）。

对于我们的大多数产品用户来说，是否有超出时间的数字被认为是计算量大的？

【问题讨论】：

答：这取决于

标签： javascript reactjs react-hooks react-usememo react-usecallback

【解决方案1】：

对于我们的大多数产品用户来说，是否有一些时间超出计算量

据我所知-没有标准定义。在大多数情况下，它不是必需的（即使对于看起来很复杂的计算 - 计算机速度非常快）。

作为一般经验法则，如果您看到/注意到 dom 更改的延迟 - 那么是时候开始寻找性能瓶颈了

【讨论】：

【解决方案2】：

可以选择在开发期间放置控制台日志，并检查您在浏览器检查器中看到该输出的次数。

useMemo 似乎总是不做它应该做的事情，有时甚至似乎比使用 useCallback 做更多的计算。

React 网站上没有任何官方文档显示如何正确使用 useMemo 的可靠示例。它通常是常见的伪代码，例如

function (props) {
 const a = useMemo(() => {
 
 //some expensive calculation
 return b;
}, [props]);

【讨论】：