zoukankan      html  css  js  c++  java
  • 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>
            </>
        )
    }
    
    
    

    效果如下

  • 相关阅读:
    ohmyzsh
    https://github.com/
    init 0,1,2,3,4,5,6
    关于反射
    docker学习笔记
    docker常见问题汇总
    ArrayList的sublist
    java-锁
    CAS-原子操作
    hashMap与concurrentHashMap
  • 原文地址:https://www.cnblogs.com/malong1992/p/15365880.html
Copyright © 2011-2022 走看看