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计算属性,会缓存计算结果

相关推荐
像风一样自由20202 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
伍哥的传说2 小时前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术3 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing3 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止3 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall3 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴3 小时前
简单入门Python装饰器
前端·python
袁煦丞4 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作