- useMemo用来缓存一个组件
- 在父组件中定义俩个时间值传给子组件
//app.js
import React,{useState} from 'react';
import Memo from './useMemo'
function App(){
const [time,setTime]=useState(new Date().getTime())
const [day,setDay]=useState(new Date().getDay())
return(
<div>
<Memo time={time} day={day}/>
<button onClick={()=>setTime(new Date().getTime())}>setTime</button>
<button onClick={()=>setDay(new Date().getDay())}>setDay</button>
</div>
)
}
export default App;
在使用useMemo后改变time值不会打印day的值,成功优化了性能
//组件中
import React,{useMemo} from 'react';
function Memo({time,day}){
function Time(time){
console.log('time')
return (
<div>{time}</div>
)
}
function Day(day){
console.log('day')
return (
<div>{day}</div>
)
}
const getTime = useMemo(()=>Time(time),[time])
const getDay = useMemo(()=>Day(day),[day])
return(
<div>{getTime}:{getDay}</div>
)
}
export default Memo