hook:useMemo

useMemo

这个hook的作用有点像我们以前学习的计算属性一样，它会缓存我们上次的结果，只有当特定的属性改变时才从新计算。

并且他能“记住”任何类型的值

标准写法

useMemo(()=> { return "我们想要记住的东西"},[dependencies])

//解析

useMemo接收两个参数，第一个参数传入一个函数，函数的返回值就是我们要缓存的东西；

第二个参数是依赖项与useEffect和useCallback的依赖项一样，限定什么时候发生改变

 简单来说，就是我们想在组件从新渲染时，有一些方法我们不需要从新计算直接取以前的值的作为结果就好，那我们就可以利用useMemo来实现。

先写一个例子：

1.  
   import React,{useState} from 'react'
2.  
    
3.  
   export default function Box3(props) {
4.  
   let [a,setA]=useState(1)
5.  
   let isg1=()=>{
6.  
   console.log("被调用了");
7.  
   if (props.name1[0]=="z"||props.age>18||props.hight>170) {
8.  
   return "yes"
9.  
   }
10.  
    return "no"
11.  
    }
12.  
    return (
13.  
    <div>
14.  
    <div>box3--------</div>
15.  
    {isg1()}
16.  
    <button onClick={()=>{setA(a 1)}}>111</button>
17.  
    </div>
18.  
    )
19.  
    }

我们通过父组件传来的值在isg1函数中得到一个结果，当父组件传来的值不变时我们就没有必要去从新执行这个函数得到结果，直接复用就好。但是现在a发生变化时组件从新渲染，isg1也被从新执行。

改进isg1:

    let isg1= useMemo(()=>{

        console.log("被调用了");

        if (props.name1[0]=="z"||props.age>18||props.hight>170) {

            return "yes"

        }

        return "no"

    },[props])

 改进过后只有当props的值发生改变时，工具函数才会从新运行；其余情况直接取前面运行时缓存的值。

对比一下useMemo和useCallback的区别

相同点：

在依赖数据发生变化的时候，才会调用传进去的回调函数去重新计算结果，起到一个缓存的作用；

不同点：

1、useMemo  缓存的结果是回调函数中return回来的值，主要用于缓存计算结果的值，应用场景如需要计算的状态
2、useCallback  缓存的结果是函数，主要用于缓存函数，应用场景如需要缓存的函数，因为函数式组件每次任何一个state发生变化，会触发整个组件更新，一些函数是没有必要更新的，此时就应该缓存起来，提高性能，减少对资源的浪费；
 

这篇好文章是转载于：学新通技术网