react中useMemo钩子函数的使用

1.使用useMemo前展示

import { useState,useMemo } from "react"

function kanno(num){
    console.log(999,num);
    return ++num
}

function UseMemo(){
    const [count1,setCount1] = useState(0)
    const [count2,setCount2] = useState(0)
    const result = kanno(count1)
    console.log(666);
    return (
        <div>
            <button onClick={()=>setCount1(count1+1)}>count1:{count1}</button>
            {result}
            <button onClick={()=>setCount2(count2+1)}>count2:{count2}</button>
        </div>
    )
}

export default UseMemo

2.使用useMemo后展示

import { useState,useMemo } from "react"

function kanno(num){
    console.log(999,num);
    return ++num
}

function UseMemo(){
    const [count1,setCount1] = useState(0)
    const [count2,setCount2] = useState(0)
    const result = useMemo(()=>{
        return kanno(count1)
    },[count1])
    console.log(666);
    return (
        <div>
            <button onClick={()=>setCount1(count1+1)}>count1:{count1}</button>
            {result}
            <button onClick={()=>setCount2(count2+1)}>count2:{count2}</button>
        </div>
    )
}

export default UseMemo