React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React useMemo useCallback

React中useMemo、useCallback的具体使用

作者：不叫猫先生

useMemo和useCallback是React中用于缓存计算结果和函数的Hooks,本文就来介绍一下useMemo、useCallback的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

useMemo

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

语法：

let xxx = useMemo(callback,[dependencies])

使用

  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主要用于优化传递给子组件的函数，避免每次父组件重新渲染时，子组件因为接受到新的函数引用而重新渲染。

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

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

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

使用

父组件

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 进行优化时。

到此这篇关于React中useMemo、useCallback的具体使用的文章就介绍到这了,更多相关React useMemo useCallback内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文