useMemo

在前端开发的过程中，我们需要缓存一些内容，以避免在需渲染过程中因大量不必要的耗时计算而导致的性能问题。为此 React 提供了一些方法可以帮助我们去实现数据的缓存，useMemo 就是其中之一！

jsx

import React, { useState, useMemo } from "react";
export default function Demo() {
    let [x, setX] = useState(10),
        [y, setY] = useState(20);
    /* const computed = () => {
        // 大量的计算...
        return x;
    }; */
    const cacheVal = useMemo(() => {
        // 大量的计算...
        return x;
    }, [x]);
    return <div>
        {/* <span>{computed()}</span> */}
        <span>{cacheVal}</span>
        <button onClick={() => setX(x + 1)}>处理</button>
        <br />
        <span>y</span>
        <button onClick={() => setY(y + 1)}>处理</button>
    </div>;
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

useMemo #

useMemo