ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

useMemo解决子组件重复执行问题

2022-05-18 16:04:17  阅读:43  来源: 互联网

标签:function const name useMemo 重复 useState 志玲 组件 return


父组件里任何一个状态发生变化,子组件里的方法或者代码都会重新渲染一遍(性能问题)

shouldCompnentUpdate 组件更新前

对比状态  需要  useEffect 父子组件  方法()

请求数据  useMemo解决重复执行问题

副作用展示

import React ,{useState} from 'react'
//imr
function MemoDome(){
    const [xiaohong,setXiaohong]=useState("小红在待客状态")
    const [zhiling,setZhiling]=useState("志玲在待客状态")
    return(
        <>
        {/* 类似于React.Fragment */}
        <button onClick={()=>{setXiaohong(new Date().getTime())}}>小红</button>
        <button onClick={()=>{setZhiling(new Date().getTime()+'志玲向我们走来')}}>志玲</button>
        <ChildComponent name={xiaohong}>{zhiling}</ChildComponent>
        </>
    )
}
function ChildComponent({name,children}){
    function changeXiaohong(){
        console.log(`她来了,她来了,小红向我们走来了`)
        return name+',小红向我们走来了'
    }
    const actionXiaohong =changeXiaohong(name);
    return(
        <>
            <div>{actionXiaohong}</div>
            <div>{children}</div>
        </>
    )
}
export default MemoDome

 

使用useMemo后

import React ,{useState,useMemo,useEffect} from 'react'
//imr
function MemoDome(){
    const [xiaohong,setXiaohong]=useState("小红在待客状态")
    const [zhiling,setZhiling]=useState("志玲在待客状态")
    return(
        <>
        {/* 类似于React.Fragment */}
        <button onClick={()=>{setXiaohong(new Date().getTime())}}>小红</button>
        <button onClick={()=>{setZhiling(new Date().getTime()+'志玲向我们走来')}}>志玲</button>
        <ChildComponent name={xiaohong}>{zhiling}</ChildComponent>
        </>
    )
}
function ChildComponent({name,children}){
    function changeXiaohong(){
        console.log(`她来了,她来了,小红向我们走来了`)
        return name+',小红向我们走来了'
    }
    // const actionXiaohong =useEffect(()=>changeXiaohong(name),[name]);
    //后面加数组即为数组里的值发生变化时触发方法。
    const actionXiaohong =useMemo(()=>changeXiaohong(name),[name]);
    return(
        <>
            <div>{actionXiaohong}</div>
            <div>{children}</div>
        </>
    )
}
export default MemoDome

 

标签:function,const,name,useMemo,重复,useState,志玲,组件,return
来源: https://www.cnblogs.com/Jarsmine/p/16284988.html

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有