React钩子函数——useMemo

作用：

1. 避免大量计算
2. 配合react.memo缓存子组件传入的数组/对象 例如在下面这个例子中，虽然每次点击button的时候只用渲染下，y，x就行，但是因为这两个状态的改变还要重新渲染整个组件，导致for循环每次都要重新执行一遍，是页面渲染时间增加，

    function Myapp()
    {
      const [x,setX]=useState(0);
      const [y,setY]=useState(0);
      let a=0
      for(let i=0;i<10000000;i++){
        a+=j
      }
return<>
<h1>x:{x}</h1>
<h1>y:{y}</h1>
<h1>a:{a}</h1>
<button onClick={()=>setX(x+1)}>+</button>
<button onClick={()=>setX(y+1)}>-</button>
</> }

用useMemo就可以保存需要大量计算的结果，在每次函数执行之前判断是否需要执行大量计算，如果不用就返回之前保存到结果。只会在艘次渲染时耗费时间。 使用方法： 从react中解构 const {useMemo}=react 在useMemo中传入回调函数

     let a=useMemo(()=>{
        let a = 0
        for (let i = 0; i < 10000000; i++) {
          a += j
          return a
        } },[])

想把最后执行的结果a返回回去，就在回调函数中return返回值中写a，最后用a接收这个usememo的结果，需要注意的是useMemo返回的a是局部变量，接收的let a是外层函数的变量. useMemo还有数组来表示依赖项，当依赖项中的元素改变时，就重新计算，不改变就返回缓存计算的结果。 书接上回，当用高阶组件React.memo防止子组件重新渲染时，如果父组件传入数组，对象这样的复杂数据类型时候，因为重新渲染创建的内存地址不同，子组件也会重新渲染，为保证告诉子组件一直是一个数组或对象，用useMemo包裹传入的数组或对象。

    function Myapp(){
      const arr=useMemo(()=>['a','b','c4'],[])
      return <>
      <Child arr={arr}/>
      </> }

通过arr接收useMemo缓存的数组，告诉子组件还是一个。 当然，也不止用usememo这一个办法，只要让arr被记住就行 例如：useState const [arr,setarr]=useState(['a','b','c4']) useRef const arr=useRef(['a','b','c4'])