是否有使用任何好处useMemo(例如,对于密集的函数调用),而不是使用的组合useEffect和useState?
useMemo
useEffect
useState
这是两个自定义钩子,它们的乍看效果完全一样,除了useMemo的返回值null在第一个渲染器上:
null
useEffect和useState
const useCalculate = numberProp => { const [result, setResult] = useState<number>(null); useEffect(() => { setResult(expensiveCalculation(numberProp)); }, [numberProp]); return result; };
const useCalculateWithMemo = numberProp => { return useMemo(() => { return expensiveCalculation(numberProp); }, [numberProp]); };
https://codesandbox.io/s/nkxolxwzkj
两者都计算每次“ prop”更改时,useMemo踢球的“缓存” 在哪里?
现实世界中有哪些示例useMemo?
在useEffect和setState每个变化都会导致额外的呈现:第一个将呈现“落后”与陈旧的数据,然后它会立即排队,用新的数据的附加渲染。
setState
假设我们有:
function expensiveCalculation(x) { return x + 1; }; // Maybe I'm running this on a literal potato
假设numberProp最初为0:
numberProp
1
然后,如果我们更改numberProp为2:
3
就expensiveCalculation运行频率而言,两者具有相同的行为,但是useEffect版本导致的渲染量是原来的两倍,这由于其他原因而对性能不利。
expensiveCalculation
另外useMemo,IMO 的版本更干净,更易读。它不会引入不必要的可变状态,并且运动部件更少。
因此,最好只useMemo在这里使用。