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

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

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