0
点赞
收藏
分享

微信扫一扫

SpringBoot之请求映射原理

仲秋花似锦 2024-06-14 阅读 8

目录

1,介绍

一句话总结,效果类似 Vue 中的 computed。常用于性能优化。

和 useCallback 的区别

使用上没有区别,同样如果依赖项没有发生变化,第1个参数不会再次执行。

  • useMemo会将第1个参数的返回值缓存起来。
  • useCallback 会将第1个参数的引用值缓存起来。

一般来说,useMemo 用于缓存值。而 useCallback 用户缓存函数。

2,使用举例

2.1,优化子组件渲染1

对 上篇文章 的例子来说,可以优化为:

const handleClick = useCallback(() => {
   setTxt(Math.random());
}, [txt]);

// 改造为
const handleClick = useMemo(() => {
    return () => {
        setTxt(Math.random());
    };
}, [txt]);

2.2,优化子组件渲染2

import React, { useState } from "react";

function Child(props) {
    return <li>{props.item}</li>;
}

export default function App() {
    const [range, setRange] = useState({
        min: 0,
        max: 10000,
    });
    const [n, setN] = useState(0);

    const list = [];
    for (let i = range.min; i < range.max; i++) {
        list.push(<Child item={i} key={i}></Child>);
    }

    return (
        <>
            {list}
            <input
                type="number"
                value={n}
                onChange={(e) => {
                    setN(e.target.value);
                }}
            />
        </>
    );
}

可以看到,不做优化前,每次改变状态变量 n,都会触发子组件渲染。而且子组件的渲染开销很大。

优化父组件:

export default function App() {
    // ...
    const list = useMemo(() => {
        const list = [];
        for (let i = range.min; i < range.max; i++) {
            list.push(<Child item={i} key={i}></Child>);
        }
        return list;
    }, [range.min, range.max]);
    // ...
}

以上。

举报

相关推荐

0 条评论