react中useMemo使用结合案例演示

react中useMemo使用结合案例演示

 

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

const ChildComp = ({name,children}) =>{

    function changeXiaohong(_name){

        console.log('小红向我们走来了.....');

        return _name +'小红向我们走来了'
    }

    const actionXiaohong =useMemo(() =>{
        changeXiaohong(name)
    },[name]) ;

    // const actionXiaohong =changeXiaohong(name)

    return(
        <>
            <div>{actionXiaohong}</div>
            <div>{children}</div>

        </>
    )
}

export default function Parent() {
    const [xiaohong, setXiaohong] = useState('小红在待客状态')
    const [zhiling, setZhiling] = useState('志玲在待客状态')

    return (
        <>
            <button onClick={() => {setXiaohong(new Date().getTime() )  } }>小红</button>&nbsp;
            <button onClick={() =>{setZhiling(new Date().getTime() + '志玲向我们走来')} } >志玲</button><br />

            <ChildComp name={xiaohong}>{zhiling}</ChildComp>
        </>
    )
}

效果如下