react hooks useMemo和useCallback

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 主要缓存函数,节省函数的不必要的重新创建(或刷新)开销