【React】useMemo、useCallback

useMemo

useMemo
用于 缓存 计算结果，避免不必要的重新计算。它返回一个记忆化的值，仅在 依赖项变化时重新计算，否则会返回上次计算的结果。这样可以有效减少昂贵的计算或渲染。

语法：

let xxx = useMemo(callback,[dependencies])

• 第一次渲染组件的时候，callback会执行
• 后期只有依赖的状态值发生改变，callback才会再执行
• 每一次会把callback执行的返回结果赋值给xxx
• useMemo具备“计算缓存”，在依赖的状态值没有发生改变，callback没有触发执行的时候，xxx获取的是上一次计算出来的结果
• 和Vue中的计算属性非常的类似！！

使用

  const Demo = function Demo() {
    console.log("渲染")
    let [supNum, setSupNum] = useState(10),
        [oppNum, setOppNum] = useState(5),
        [x, setX] = useState(0);

    let ratio = useMemo(() => {
       console.log(useMemo,'useMemo')
        let total = supNum + oppNum,
            ratio = '--';
        if (total > 0) ratio = (supNum / total * 100).toFixed(2) + '%';
        return ratio;
    }, [supNum, oppNum]);

    return <div className="vote-box">
        <div className="main">
            <p>支持人数：{supNum}人</p>
            <p>反对人数：{oppNum}人</p>
            <p>支持比率：{ratio}</p>
            <p>x:{x}</p>
        </div>
        <div className="footer">
            <Button type="primary" onClick={() => setSupNum(supNum + 1)}>支持</Button>
            <Button type="primary" danger onClick={() => setOppNum(oppNum + 1)}>反对</Button>
            <Button onClick={() => setX(x + 1)}>干点别的事</Button>
        </div>
    </div>;
};

初始渲染，打印如下：

点击新增，打印如下：

点击干点别的事，打印如下：

注意事项

useMemo 不会提高性能的使用频率，它只是优化那些需要高开销计算的场景。如果计算本身就很轻量化，使用 useMemo 反而可能带来额外的性能开销。
useMemo 不会阻止组件重新渲染，它只是在渲染过程中缓存某些计算值。

useCallback

useCallback 用于 缓存函数，避免函数在每次渲染时都被重新创建。它返回一个记忆化的回调函数，只有当依赖项变化时，才会重新创建该函数。
虽然减少了堆内存的开辟，但是useCallback本身也有自己的处理逻辑和缓存机制，这个也消耗时间。

语法

  const xxx = useCallback(callback,[dependencies]) 

• 组件第一次渲染，useCallback执行，创建一个函数“callback”，赋值给xxx
• 组件后续每一次更新，判断依赖的状态值是否改变，如果改变，则重新创建新的函数堆，赋值给xxx；但是如果，依赖的状态没有更新「或者没有设置依赖“[]”」则xxx获取的一直是第一次创建的函数堆，不会创建新的函数出来！！
• 或者说，基于useCallback，可以始终获取第一次创建函数的堆内存地址(或者说函数的引用)

适用场景

useCallback主要用于优化传递给子组件的函数，避免每次父组件重新渲染时，子组件因为接受到新的函数引用而重新渲染。

父组件更新时，传递给子组件的属性仅仅是一个函数「特点：基本应该算不变的」，不再让子组件也跟着更新。

1、传递给子组件的属性（函数），每一次需要是相同的堆内存地址（是一致的），基于useCallback处理。

2、在子组件内部也要做一个处理，验证父组件传递的属性是否发生改变，如果没有变化，则让子组件不能更新，有变化才需要更新。子组件需要判断传递过来的属性有没有变化，此时

• 类组件可以使用React.PureComponent即可「在shouldComponentUpdate中对新老属性做了浅比较」
• 函数组件可以使用React.memo函数，对新老传递的属性做比较，如果不一致，才会把函数组件执行，如果一致，则不让子组件更新。

使用

父组件

const Demo = function Demo() {
    let [x, setX] = useState(0);

    // const handle = () => { };  //第一次:0x001  第二次:0x101  第三次:0x201 ...
    const handle = useCallback(() => { }, []); //第一次:0x001  第二次:0x001  第三次:0x001 ...

    return <div className="vote-box">
        <Child handle={handle} />
        <div className="main">
            <p>{x}</p>
        </div>
        <div className="footer">
            <Button type="primary" onClick={() => setX(x + 1)}>累加</Button>
        </div>
    </div>;
};

子组件为类组件

class Child extends React.PureComponent {
    render() {
        console.log('Child Render');
        return <div>
            我是子组件
        </div>;
    }
} 

子组件为函数组件

const Child = React.memo(function Child(props) {
    console.log('Child Render');
    return <div>
        我是子组件
    </div>;
}); 

useCallback 对性能的优化主要体现在避免子组件不必要的重新渲染，尤其是在子组件是 React.memo 或 shouldComponentUpdate 进行优化时。