hook useMemo基本用法

useMemo作用：在组件每次重新渲染的时候缓存计算的结果
作用场景：消耗非常大计算时使用

具体代码如下所示：

import { useMemo, useState } from 'react';

function fib(n) {
    console.log('计算函数执行了');
    if (n < 3) return 1;

    return fib(n - 2) + fib(n - 1);
}


function Layout() {
    const [count1, setCount1] = useState(0);

    // 性能优化，按钮count2不涉及count1不会触发console.log('计算函数执行了');
    const result = useMemo(() => {
        return fib(count1)
    }, [count1])


    // 这种会导致性能不佳
    // const result = fib(count1);

    const [count2, setCount2] = useState(0);

    console.log('组件重新渲染了');

    return (
        <div>
            <div>Layout</div>
            <button onClick={() => setCount1(count1 + 1)}>count1: {count1}</button>
            <button onClick={() => setCount2(count2 + 1)}>count2: {count2}</button>
            {result}
        </div>
    )
}

export default Layout;