學會使用useMemo和useCallback對你沒壞處

這是我參與8月更文挑戰的第31天，活動詳情檢視： 8月更文挑戰

什麼是useMemo？

useMemo的行為類似Vue中的計算屬性，可以檢測某個值的變化，根據變化值計算新值。useMemo會緩存計算結果，如果檢測值沒有發生變化，即使元件重新渲染，也不會重新計算，此行為可以有助于避免在每個渲染上進行昂貴的計算。不要再useMemo函數中執行與渲染無關的操作。

useMemo的基本用法

function App() {
    const [bool,setBool] = useState(true);
    const [age,setAge] = useState('666');
    
    const result = useMemo(() => {
        console.log('檢測到age發生變化');
        return age * 2; 
    },[age])
    return (
        <div>
            {age}
            {bool ? '真': '假'}
            <button onClick={() => setBool(!bool)}>點我切換布爾值</button>
            <button onClick={() => setAge(age*1 + 1)}>點我age+1</button>
            result是：{result}
        </div>
    )
}
複制代碼      

memo方法

memo方法可以用于性能優化，如果本元件中的資料沒有發生變化，阻止元件更新，類似類元件中的PureComponent和shouldComponentUpdate.

memo方法的基本用法

function App() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <Foo />
            <h1>目前求和為：{count}</h1>
            <button onClick={() => setCount(count + 1)}>點我+1</button>
        </div>
    )
}
const Foo = memo(function Foo() {
    console.log('Foo被渲染了');
    return (
        <div>這是Foo元件</div>
    )
})
複制代碼      

useCallback是什麼？

常用于性能優化，緩存函數，使得元件重新渲染時得到相同的函數執行個體。

useCallback的基本用法

在這裡我們需要注意的是useCallback的第一個參數時我們需要緩存的函數，第二個參數是一個數組，數組中包含的是沒有變化的目标函數。

function App() {
    const [count, setCount] = useState(0);
    const resetCount = useCallback(() => setCount(0),[setCount]);
    return (
        <div>
            <Foo resetCount={resetCount}/>
            <h1>目前求和為：{count}</h1>
            <button onClick={() => setCount(count + 1)}>點我+1</button>
            
        </div>
    )
}
const Foo = memo(function Foo(props) {
    console.log('Foo被渲染了');
    return (
        <div>
            這是Foo元件
            <button onClick={props.resetCount}>點我歸零</button>
        </div>
    )
})
複制代碼      

參考資料

• 官方文檔：useCallback
• 官方文檔：useMemo