export default () => {
const [count, setCount] = useState(0);
const isEvenNumber = useMemo(()=>{
return count % 2 === 0
}, [count])
const onClick = useCallback(()=>{
setCount(count+1)
},[count])
return (<div>
<div>{count} is {isEvenNumber? 'even':'odd'} number</div>
<button onClick={onClick}>click me</button>
</div>)
}
- 区别:
- useMemo 主要用来缓存计算结果,节省的是计算开销
- useCallback 主要缓存函数,节省函数的不必要的重新创建(或刷新)开销