react中useMemo使用案例二

react中useMemo使用案例二

 

import React,{useState,useMemo} from "react"

export default function UseMemo(){
    // 返回一个数组,第一个值是状态,第二个是改变状态的函数
  const [num, setNum] = useState(1);
  const [age, setAge] = useState(18);


    // function getDoubleNum(){
    //   console.log('获取双倍的num');
    //   return 2*num
    // }


    // useMemo 返回的是一个值
    //第二个参数可以让其只跟随num 改变而执行
    const getDoubleNum =useMemo(() =>{
      console.log("获取双倍的memo");
      return 2*num
    },[num])

    return(
        <div onClick={() => setAge(age +1)}>这是一个函数式组件--{getDoubleNum}  ---age:{age}</div>
    )
}