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 (
{count} is {isEvenNumber? 'even':'odd'} number
) }
  • 区别:
  • useMemo 主要用来缓存计算结果,节省的是计算开销
  • useCallback 主要缓存函数,节省函数的不必要的重新创建(或刷新)开销

相关