react hooks 的useMemo:

React 的 useMemo Hook 用于在函数组件中进行记忆化计算,它可以缓存一些需要耗时计算的值,以避免无谓的重复计算。

useMemo 接收一个回调函数和一个依赖数组作为参数。

复制代码
import { useMemo } from 'react';

const memoizedValue = useMemo(() => {
  // 计算和返回一个值

  return value;
}, [依赖数组]);

回调函数用于进行一些复杂或耗时的计算,计算结果将被缓存起来。如果依赖数组发生变化,将重新执行回调函数并更新缓存的值。

缓存的值可以在组件的渲染周期内被多次使用,而不需要每次重新计算。

以下是一些使用 useMemo 的示例:

  1. 计算衍生的数据:在依赖项发生变化时重新计算衍生的数据。

    import { useMemo } from 'react';

    function MyComponent({ a, b }) {
    const sum = useMemo(() => {
    console.log('Sum computed');
    return a + b;
    }, [a, b]);

    return

    {sum}
    ;
    }

在这个例子中,当 ab 发生变化时,sum 将被重新计算。否则,它将从缓存中读取上一次计算的结果。

  1. 优化性能:避免重复的计算。

    import { useMemo } from 'react';

    function MyComponent({ list }) {
    const sortedList = useMemo(() => {
    console.log('Sorting list');
    return list.sort();
    }, [list]);

    return

    {sortedList}
    ;
    }

在这个例子中,当 list 发生变化时,sortedList 将被重新计算并排序。否则,它将从缓存中读取上一次计算的结果。

通过使用 useMemo Hook,我们可以在函数组件中缓存计算结果,以提高性能和避免不必要的重复计算。这在处理大型数据集或复杂计算时特别有用。

例子:

复制代码
// useMemo 是 React 提供的一个钩子函数,用于在函数组件中进行性能优化。它的作用是对计算结果进行缓存,只有在依赖的值发生改变时才重新计算。
// 在某些情况下,组件内部的计算可能会比较耗时,而且计算结果并不会频繁变化。
// 这时就可以使用 useMemo 来缓存计算结果,避免不必要的重复计算,提高组件的性能。
// useMemo 接收两个参数:一个回调函数和一个依赖数组。回调函数用于计算需要缓存的值,依赖数组则用于指定哪些变量的变化会触发重新计算。
// 只有当依赖数组中的值发生改变时,才会重新计算并返回新的值。、
// 类似于vue中的computed,但是它是纯函数,不会有副作用。
import React, { useMemo, useState } from 'react';

function Example() {
    const [count, setCount] = useState(0);

    const expensiveOperation = useMemo(() => {
        console.log('Calculating...');
        let result = 0;
        for (let i = 0; i < count; i++) {
            result += i;
        }
        return result;
    }, [count]);

    return (
        <div>
            <p>Count: {count}</p>
            <p>Result of Expensive Operation: {expensiveOperation}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}
export default Example;
// 在上面的例子中,我们定义了一个 expensiveOperation 的计算操作,并使用了 useMemo 将其结果缓存起来。只有当 count 发生变化时,才重新进行计算。
//
// 需要注意的是,useMemo 的缓存只对当前组件实例有效,不会在不同组件实例之间共享,
// 所以它只对当前组件内的数据共享和性能优化有效。
//
// 使用 useMemo 可以避免不必要的计算,提高组件的渲染性能。但是在大多数情况下,
// 仅当计算确实非常耗时时,才需要使用 useMemo 进行性能优化。在大多数情况下,组件的重渲染并不会带来明显的性能问题。
相关推荐
excel6 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着6 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友8 小时前
什么是API签名?
前端·后端·安全
会豪10 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子10 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶10 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子10 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_10 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_233310 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin10 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js