useMemo

useMemo接受一个函数和依赖数组。当数组中依赖项变化的时候，这个函数就会执行，返回新的值。 useCallback缓存的是回调函数，useMemo缓存的是return的值。

import React,{useState,useMemo, useCallback} from "react"
const App=()=>{
    let [count,setCount]=useState(0);
    let [x,setX]=useState(100)
    //useMemo的返回值就是return回来的值。
    const sum=useMemo(()=>{
       let y=0;
       //当x=100的时候，y返回的值一直是上次缓存下来的5050，所以每次count都和5050相加
       //当点击另一个按钮时，x变为1000，重新计算这个值并存到sum里
       //count这时候就是和1-1000的累加和相加
       for(var i=0; i<=x; i++){
          y+=i;
       }
       return y;
    },[x])
    const sum2=useCallback(()=>{
        setCount(count+sum)
    },[count,sum])
    const changeX=useCallback(()=>{
        setX(1000)
    })
    return <div>
         <button onClick={sum2}>点击求和</button>
         <span>{count}</span>
         <p>
             <button onClick={changeX}>点击x变为1000</button>
             <span>{x}</span>
         </p>
         

    </div>
}
export default App