理解
useMemo是用来缓存计算属性的,可以帮助我们优化性能,useMemo不是用的越多越好,因为缓存,需要成本!
使用场景
- 当我们的某一个计算属性真的需要大量的计算时候
//Com组件 const Com = () => { //这种就是完全没必要被useMemo缓存的,计算过程一共也就一个创建变量,一个加一,缓存它反而亏本 const computedFun1 = () => { let number = 0; number = numebr +1; return number; } //这个就需要缓存一下了,毕竟他每次计算的计算量还是蛮大的。 const computedFun2 = () => { let number = 0; for(let i=0;i<100000;++i){ number = number +i-(number-i*1.1); } return number; } return <div onClick = {handleFun1}> computed1:{computedFun1()} //这个计算量小,是不需要使用useMemo缓存的,缓存它反而亏本 computed2:{computedFun2()} //这个计算量大,需要缓存。 </div> }
- 当子组件依赖父组件的某一个依赖计算属性并且子组件使用了React.memo进行优化了的时候。