ICode9

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

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

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

标签: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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

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

ICode9版权所有