useMemo的使用

useMemo 的使用方法

useMemo的作用

useMemo 类似于Vue的计算属性，监听某个值的变化，根据变化的值重新计算新值；
useMemo会缓存结果，如果监听的值没有发生变化，即使组件重新渲染，也不会重新发生计算，这个行为有助于避免在每个渲染上进行昂贵的计算

useMemo 的使用方法

import React, {useMemo, useState} from "react";

function Memo (){

    const [count, setCount] = useState(0)
    const [bool, setBool] = useState(true)
    useMemo(() => {
        console.log('变化了')
    }, [count])

    return (
        <div>
            <div>{count}</div>
            <div>{bool ? '真' : '假'}</div>
            <button onClick={() => setCount(count + 1)}>+1</button>
            <button onClick={() => setBool(!bool)}>取反</button>
        </div>
    )
}

export default Memo;

这里讲一下, 以上代码通过点击触发setCount改变count的值，组件会重新渲染且useMemo会监听count值的变化进行重新计算，但是当我i触发setBool改变bool的值，组件只进行了重新渲染但是useMemo没有重新计算并执行，因为当前useMomo监听的时count的变化，其他变化与我无关；