useMemo的使用

来学习一下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完成了