react中useMemo的使用场景

useMemo 是 React 的一个 Hook,用来优化性能,尤其是在计算复杂值时。它会记住(缓存)计算结果,只有在依赖项变化时才重新计算,避免不必要的重复计算。

import React, { useMemo } from 'react';

function Example({ num }) {

// 使用 useMemo 来缓存计算结果

const expensiveComputation = useMemo(() => {

console.log('Performing expensive computation...');

return num * 2;

}, [num]); // 只有 num 改变时才重新计算

return (

<div>

<p>Expensive Computation Result: {expensiveComputation}</p>

</div>

);

}

export default Example;

解释

注意事项

  • useMemo 接受两个参数:

    1. 一个返回值的函数,用于计算你想要缓存的值(在上面的例子中是 num * 2)。
    2. 一个依赖项数组,只有当数组中的值变化时,useMemo 才会重新计算缓存的值(在上面的例子中是 num)。
  • 注意useMemo 只是在依赖项变化时重新计算,其他时候返回缓存的值。它并不会保证组件渲染时总是返回缓存值。React 本身会判断是否需要重新计算。
    二、useMemo 可以帮助避免在每次渲染时重复执行昂贵的计算,尤其是那些需要大量计算的复杂数据处理、排序、过滤等操作。

  • import React, { useMemo, useState } from 'react';

    function App() {

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

    const [num, setNum] = useState(1);

    // 假设这个计算非常昂贵

    const expensiveValue = useMemo(() => {

    console.log('Computing expensive value...');

    return num * 1000;

    }, [num]); // 只有 num 改变时,才会重新计算

    return (

    <div>

    <p>Count: {count}</p>

    <p>Expensive Computed Value: {expensiveValue}</p>

    <button onClick={() => setCount(count + 1)}>Increment Count</button>

    <button onClick={() => setNum(num + 1)}>Change Num</button>

    </div>

    );

    }

    export default App;

    使用场景

  • 避免不必要的渲染 :当你有一些高计算的任务或者处理复杂数据时(如排序、过滤、图表计算等),使用 useMemo 可以避免这些操作每次渲染时都执行。

  • 优化子组件渲染 :当父组件渲染时,如果传递给子组件的 prop 通过 useMemo 缓存,只要依赖项不变,子组件就不会重新渲染。

  • 不要过度使用useMemo 适用于性能瓶颈场景,但不应过度使用。对于简单的计算,React 本身已经足够优化,因此如果没有实际性能问题,过度使用 useMemo 反而可能会增加复杂度。

  • 依赖项管理:记得正确设置依赖项数组。如果依赖项没有正确更新,可能会导致渲染中的数据不一致问题。

  • 有些类似于vue中的computed计算属性,会缓存计算结果

相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪10 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom11 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom11 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试