来学习一下useMemo的使用
import React,{useState,useMemo} from 'react';
function Example7(){
const [xiaohong,setxiaohong]=useState("");
const [zhiling,setzhiling]=useState("");
return(
<>
<button onClick={()=>{setxiaohong(new Date().getTime())}}>小红</button>
<button onClick={()=>{setzhiling(new Date().getTime()+"好看的志玲")}}>志玲</button>
<ChildComponent name={xiaohong}>{zhiling}</ChildComponent>
</>
)
}
function ChildComponent({name,children}){
function changeXH(){
console.log("小红改变了")
return name +',小红来自湖北'
}
//const actionXH = changeXH(name) ;
//防止子组件重复受其父组件更新的影响
const actionXH = useMemo(()=>changeXH(name),[name]) ;
return (
<>
<div>{actionXH}</div>
<div>{children}</div>
</>
)
}
export default Example7;
效果图
然后我们用
const actionXH = useMemo(()=>changeXH(name),[name]) ;
只有name触发改变才会触发
OK完成了