memo、useMemo、useCallback总结

已于 2022-06-04 14:03:31 修改
阅读量753 收藏 4
点赞数 2
分类专栏： react 文章标签： react.js 前端
于 2022-06-04 13:53:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44704740/article/details/125119815
版权

memo

类组件可以通过继承类 PureComponent 或者实现 shouldComponentUpdate 来主动判断组件是否需要重新渲染，以此来提高性能。在使用函数组件的时候可以使用memo达到此目的。

  • React.memo 接收两个参数，一个是组件，一个是（比较）函数
    • 组件：组件必须是函数式组件
    • 函数：这个函数就是定义组件是否需要重渲染的钩子，该函数传入两个参数，第一个参数为上次渲染的 props，第二参数为本次渲染的 props
  • 函数返回值为 true 时复用最近一次渲染，否则 false 重新渲染

⚠️ 注意：
如果不通过比较函数进行比较，那么依然是一种对象的浅比较，有复杂对象时无法重新渲染

举个例子

import { useState } from 'react';

const Com1 = (props: any) => {
  console.log(`Com1 ---- ${props.count}`)
  return <div> {props.count}</div>;
};

const Com2 = (props: any) => {
  console.log(`Com2 ---- ${props.count}`)
  return <div> {props.count}</div>
};

const App = () => {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  return (
    <>
      <Com1 count={count1} />
      <button onClick={() => setCount1(count1 + 1)}>count1 + 1</button>
      <Com2 count={count2} />
      <button onClick={() => setCount2(count2 + 1)}>count2 + 1</button>
    </>
  );
};
export default () => <App />;

当你点击count2 + 1按钮，控制台打印如下：
在这里插入图片描述

Com1也触发了render！

明明点击的是count2 + 1按钮，我只希望修改count2，也只希望Com2组件重新render。

不必要的render产生了! ❌

当你使用了memo后：

import { memo, useState } from 'react';

const Com1 = (props: any) => {
  console.log(`Com1 ---- ${props.count}`)
  return <div> {props.count}</div>;
};

const Com2 = (props: any) => {
  console.log(`Com2 ---- ${props.count}`)
  return <div> {props.count}</div>
};

const MemoCom1 = memo(Com1);
const MemoCom2 = memo(Com2);

const App = () => {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  return (
    <>
      <MemoCom1 count={count1} />
      <button onClick={() => setCount1(count1 + 1)}>count1 + 1</button>
      <MemoCom2 count={count2} />
      <button onClick={() => setCount2(count2 + 1)}>count2 + 1</button>
    </>
  );
};
export default () => <App />;

点击count2 + 1按钮：

在这里插入图片描述
只有Com2触发了render！

避免了Com1组件不必要的渲染 ✅

useMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  • 把 创建 函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算memoized值。这种优化有助于避免在每次渲染时都进行高开销的计算。
  • 记住，传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作，诸如副作用这类的操作属于 useEffect 的适用范畴，而不是 useMemo。

⚠️ 注意：

  • 如果没有提供依赖项数组，useMemo 在每次渲染时都会计算新的值。

你可以把 useMemo 作为性能优化的手段，但不要把它当成语义上的保证。将来，React 可能会选择 遗忘 以前的一些 memoized 值，并在下次渲染时重新计算它们，比如为离屏组件释放内存。先编写在没有 useMemo 的情况下也可以执行的代码，之后再在你的代码中添加 useMemo，以达到优化性能的目的。

举个例子

import { memo, useState } from 'react';

const Com1 = (props: any) => {
  console.log(`Com1 ---- ${props.count}`)
  return <div> {props.count}</div>;
};

const Com2 = (props: any) => {
  console.log(`Com2 ---- ${props.count}`)
  return <div> {props.count}</div>
};

const Com3 = (props: any) => {
  console.log(`Com3 ---- ${props.count}`)
  return <div>{props.count}</div>;
};

const MemoCom1 = memo(Com1);
const MemoCom2 = memo(Com2);
const MemoCom3 = memo(Com3);

const App = () => {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  const count3 = count1 + Math.random();
  
  return (
    <>
      <MemoCom1 count={count1} />
      <button onClick={() => setCount1(count1 + 1)}>count1 + 1</button>
      <MemoCom2 count={count2} />
      <button onClick={() => setCount2(count2 + 1)}>count2 + 1</button>
      <MemoCom3 count={count3} />
    </>
  );
};
export default () => <App />;

上面的例子中count3只依赖了count1并作为prop传入了MemoCom3组件。

点击count2 + 1按钮:

在这里插入图片描述

Com3也触发了render！

我们希望只在count1变化的时候重新计算count3并重新渲染MemoCom3组件。

不必要的render产生了! ❌

当使用useMemo后：

import { memo, useState, useMemo } from 'react';

const Com1 = (props: any) => {
  console.log(`Com1 ---- ${props.count}`)
  return <div> {props.count}</div>;
};

const Com2 = (props: any) => {
  console.log(`Com2 ---- ${props.count}`)
  return <div> {props.count}</div>
};

const Com3 = (props: any) => {
  console.log(`Com3 ---- ${props.count}`)
  return <div>{props.count}</div>;
};

const MemoCom1 = memo(Com1);
const MemoCom2 = memo(Com2);
const MemoCom3 = memo(Com3);

const App = () => {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  const memoCount3 = useMemo(() => {
    return count1 * Math.random();
  }, [count1]);
  
  return (
    <>
      <MemoCom1 count={count1} />
      <button onClick={() => setCount1(count1 + 1)}>count1 + 1</button>
      <MemoCom2 count={count2} />
      <button onClick={() => setCount2(count2 + 1)}>count2 + 1</button>
      <MemoCom3 count={memoCount3} />
    </>
  );
};
export default () => <App />;

点击count2 + 1按钮：

在这里插入图片描述
只有Com2触发了render！

避免了Com3组件不必要的渲染 ✅

useCallback

const memoizedCallback = useCallback(() => {
  setValue(value);
}, [value]);
  • 返回一个 memoized 回调函数
  • 把 内联回调函数 及 依赖项数组 作为参数传入 useCallback，它将返回该回调函数的 memoized 版本，该 回调函数仅在某个依赖项改变时才会更新。当你把回调函数传递给经过优化的并使用 引用相等性 去避免非必要渲染（例如 shouldComponentUpdate）的子组件时，它将非常有用。
  • useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。

⚠️ 注意：

  • 依赖项数组不会作为参数传给回调函数。虽然从概念上来说它表现为：所有回调函数中引用的值都应该出现在依赖项数组中。未来编译器会更加智能，届时自动创建数组将成为可能。
  • 推荐启用 eslint-plugin-react-hooks 中的 exhaustive-deps 规则。此规则会在添加错误依赖时发出警告并给出修复建议。

举个例子

import { memo, useState, useCallback, useMemo } from 'react';

const Com1 = (props: any) => {
  console.log(`Com1 ---- ${props.count}`)
  return <div> {props.count}</div>;
};

const Com2 = (props: any) => {
  console.log(`Com2 ---- ${props.count}`)
  return <div> {props.count}</div>
};

const Com3 = (props: any) => {
  console.log(`Com3 ---- ${props.count}`)
  return <div>{props.count}</div>;
};

const Com4 = (props: any) => {
  console.log(`Com4 ---- `)
  return <button onClick={props.handleCount3}>count1 * 2 + 1</button>;
};

const MemoCom1 = memo(Com1);
const MemoCom2 = memo(Com2);
const MemoCom3 = memo(Com3);
const MemoCom4 = memo(Com4);

const App = () => {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  const memoCount3 = useMemo(() => {
    return count1 * Math.random();
  }, [count1]);

  const handleCount3 = (e: any) => {
  	console.log('handleCount3', e.target);
	setCount1(count1 + 1);
  }

  return (
    <>
      <MemoCom1 count={count1} />
      <button onClick={() => setCount1(count1 + 1)}>count1 + 1</button>
      <MemoCom2 count={count2} />
      <button onClick={() => setCount2(count2 + 1)}>count2 + 1</button>
      <MemoCom3 count={memoCount3} />
      <MemoCom4 handleCount3={handleCount3} />
    </>
  );
};
export default () => <App />;

上面的例子中handleCount3函数的函数体依赖了count1，作用是修改count1并作为prop传入MemoCom4组件。

点击count2 + 1按钮：

在这里插入图片描述
Com4也触发了render！

我们只希望在count1需要改变之前拿到上一个count1，并重新声明handleCount3函数传入MemoCom4组件触发重新渲染。

不必要的render产生了! ❌

使用useCallback后：

import { memo, useState, useCallback, useMemo } from 'react';

const Com1 = (props: any) => {
  console.log(`Com1 ---- ${props.count}`)
  return <div> {props.count}</div>;
};

const Com2 = (props: any) => {
  console.log(`Com2 ---- ${props.count}`)
  return <div> {props.count}</div>
};

const Com3 = (props: any) => {
  console.log(`Com3 ---- ${props.count}`)
  return <div>{props.count}</div>;
};

const Com4 = (props: any) => {
  console.log(`Com4 ---- `)
  return <button onClick={props.handleCount3}>count1 * 2 + 1</button>;
};

const MemoCom1 = memo(Com1);
const MemoCom2 = memo(Com2);
const MemoCom3 = memo(Com3);
const MemoCom4 = memo(Com4);

const App = () => {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  const memoCount3 = useMemo(() => {
    return count1 * 2;
  }, [count1]);

  const handleCount3 = (e: any) => {
    console.log('handleCount3', e.target);
    setCount1(count1 + 1);
  };

  const callbackHandleCount3 = useCallback((e) => {
    handleCount3(e);
  }, [count1]);

  return (
    <>
      <MemoCom1 count={count1} />
      <button onClick={() => setCount1(count1 + 1)}>count1 + 1</button>
      <MemoCom2 count={count2} />
      <button onClick={() => setCount2(count2 + 1)}>count2 + 1</button>
      <MemoCom3 count={memoCount3} />
      <MemoCom4 handleCount3={callbackHandleCount3} />
    </>
  );
};
export default () => <App />;

点击count2 + 1按钮：

在这里插入图片描述
只有Com2触发了render！

避免了Com4组件不必要的渲染 ✅

总结

memo、useMemo、useCallback都是react项目性能优化的手段。但是当你编写庞大的组件之前也可以考虑是否有其他方式去减少不必要的渲染，比如状态下移和内提升，感兴趣的可以去看Dan的这篇文章：在你写memo()之前。

前端Jason
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react | memo与useMemo的作用以及区别
weixin_62395055的博客
08-04 2691
React.memo 是一个高阶组件.如果你的组件在给定相同的 props 的情况下呈现相同的结果，你可以将其包装在对 React.memo 的调用中，以便在某些情况下通过记住结果来提高性能。这意味着 React 将跳过渲染组件，并重用上次渲染的结果。React.memo 只检查 prop 的变化。如果你用 React.memo 包装的函数组件在其实现中有 useState、useReducer 或 useContext Hook，那么当状态或上下文发生变化时，它仍然会重新呈现。默认情况下，它只会浅浅地比较
关于memo、useMemo、useCallback
weixin_40683440的博客
03-21 844
memo 允许你的组件在 props 没有改变的情况下跳过重新渲染。 useMemo 是一个 React Hook，它在每次重新渲染的时候能够缓存计算的结果。 useCallback 是一个允许你在多次渲染中缓存函数的 React Hook 。
react17: memo、useMemo和useCallback使用总结
qq_38969618的博客
05-18 948
React 所做的主要事情是让我们的与我们的保持同步，而要实现它们的同步，就需要执行一个叫做 “re-render” (重新渲染) 的操作。从本质上，useMemo和都是用来帮助我们优化的工具 Hook。它们通过以下两种方式实现优化的效果。减少在一次渲染中需要完成的工作量。减少一个组件需要重新渲染的次数。memoReact.memouseMemo注意：useMemo和是一个东西，只是将返回值从 数组/对象 替换为了 函数。是一种语法糖，它的存在存粹是为了让我们在缓存回调函数的时候可以方便点。
浅谈memo、PureComponent、useMemo、useEffect、useCallback的区别
最新发布
weixin_43883615的博客
06-04 499
在现在的react开发中，我们经常会使用的一些比较型的hook，都是为了提升性能，起到优化的目的。但是不能为了用而用，这东西不是用的越多越好，要视情况而定。下面讲几个常用的，并对比之间的区别。
React-hooks【三】useCallback与useMemo详解，搭配Memo使用
二三的博客
08-01 1974
我们知道，react的hook组件再state和props发生改变时，会重新渲染组件，从而导致子组件也会被重新渲染，但有些时候，子组件的props和state值没有变化，子组件就没必要重新渲染，因为如果子组件是一个大型的组件树，这种情况下虚拟DOM（VirtualDom）的比较明显是很浪费资源的，此时就可以进行优化。在我的上一篇博客中有写到，，可以使用React.memo函数包裹子组件，这样在传递给子组件的props的值没有改变时，子组件就不会重新渲染。但是当子组件中的props中还存在函数属性因此而生。.
memo、 useMemo 和 useCallback语法讲解
小李科技
12-24 104
memo、 useMemo 和 useCallback
react-optimization-demo:React.memo，useCallback，useMemo
05-21
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何...
react-memoization-hooks-2021-02-16:使用React Memo类，useCallback和useMemo控制性能的基本代码存储库
05-09
使用React Memo，useCallback和useMemo控制性能在本课程中，我们将创建一个使用GitHub API数据的应用程序，并通过它可以浏览各种改进和性能分析的概念，我们将学习如何在我们的应用程序中使用诸如useMemo和...
optimization_with_react:一个简单的小项目，我将深入研究何时以及如何使用React.memo，useMemo和useCallback来优化您的应用程序
04-09
`React.memo`，`useMemo`和`useCallback`是React提供的三个重要工具，用于减少不必要的组件重新渲染，提升应用性能。下面我们将深入探讨这三个优化策略及其应用场景。 1. **React.memo** `React.memo` 是一个高阶...
react-demos:react 从 0 到 0.1
05-22
react-demos clone ...cd react-demos Index demo15: 组件中 ref 转发...demo19: 函数组件中方法以及变量的缓存方案 useCallback、useMemo react-context Context 各种 API 的使用 react-create-demo React createElement
前端跳槽突围课：React18底层源码深入剖析教程2024
04-07
这篇文章主要为大家介绍了React 18源码深入分析useMemo useCallback memo用法及区别，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪。 最近在做 React 相关的组件搭建，因为涉及到...
useMemo与useCallback
weixin_43823378的博客
03-09 167
在hooks出来之后，我们能够使用function的形式来创建包含内部state的组件。但是，使用function的形式，失去了上面的shouldComponentUpdate，我们无法通过判断前后状态来决定是否更新。而且，在函数组件中，react不再区分mount和update两个状态，这意味着函数组件的每一次调用都会执行其内部的所有逻辑，那么会带来较大的性能损耗。因此useMemo 和useCallback就是解决性能问题的杀手锏。 对比 我们先简单的看一下useMemo和useCallback的调用签
正确使用useMemo、useCallBack、memo
JackChan
01-30 902
正确使用useMemo、useCallBack、memo
useMemo与useCallback使用指南
热门推荐
大灰狼的小绵羊哥哥的博客
07-02 8万+
上一篇文章介绍了useEffect的使用，接下来准备介绍useCallback和useMemo。 回顾 在介绍一下这两个hooks的作用之前，我们先来回顾一下react中的性能优化。在hooks诞生之前，如果组件包含内部state，我们都是基于class的形式来创建组件。当时我们也知道，react中，性能的优化点在于： 调用setState，就会触发组件的重新渲染，无论前后的state是否不...
React.memo() 和 useMemo() 的用法是什么，有哪些区别？
zz130428的博客
01-09 1535
简单来说，memoization 是一个过程，它允许缓存递归/昂贵的函数调用的值，以便下次使用相同的参数调用函数时，返回缓存的值而不必重新计算函数。，它接收一个组件A作为参数并返回一个组件B，如果组件B的 props（或其中的值）没有改变，则组件 B 会阻止组件 A 重新渲染。想象一下，有一个组件显示数以千计的数据，每次用户单击一个按钮时，该组件或树中的每条数据都会在不需要更新时重新渲染。换句话说，如果组件中的任何值更新，整个组件将重新渲染，包括尚未更改其 values/props 的函数/组件。
详解 useMemo 和 React.memo 的作用
chenyajundd的博客
04-10 840
React 中的这两个函数都带有 memo，看着比较相似，但是作用和使用场景却不一致。memo 的英文含义为，可以理解为保存，记忆之类，从字面意思可以猜测到它的作用。可能没有实战的童鞋还容易把这两个搞混，但是这两个函数有着完全不一样的功能，也不需要拿来比较，千万不要搞混了，今天就带大家一起来详细的分析一下这两个函数的作用和使用场景！
React.memo和useMemo的区别及使用
百岁如流富贵冷灰的博客
01-27 7429
发现问题 大家在使用hook进行开发的时候有没有遇到过以下的情况： 当我set某一个值的时候，有好多不相关的值都重新进行了计算，当代码量较小的时候可能不明显，但是长此以往会让页面越来越卡。 父组件的某个值更新了，但是某些并没有引用这个值的子组件竟然也更新了。 以上的两种情况如果一直放任不管的话，随着代码的累计，页面的性能就会越来越差。当用class组件的时候我们可以通过PureComponent或者生命周期中的shouldComponentUpdate方法来进行优化，但是对于hooks要怎么做呢？ ho
12react之useMemo和memo
weixin_42845571的博客
05-19 777
useMemo: 第一个参数是函数，第二个参数是监听的值是否变化，如果变化才会执行useMemo里面的函数，//类似于计算属性computed memo : 和PureComponent一样的功能，只是mome用在函数组件中（只有当state里面的值变化了才会执行render函数）(高阶函数的写法) function App() { const [name, setName] = useState('名称') const [content,setContent] = useState
React下memo, useMemo, useCallback的使用区别解析
赵花花的博客
03-06 994
本文通过对 React 中 memo，useMemo，useCallback的目的，使用场景，案例等帮助开发者了解具体使用技巧。
react memo, useEffect, useMemo, useRef, useState 方法含义
07-28
- *3* [一文轻松掌握react-hook(useState、useReducer、useEffect、useCallback、useMemo、useRef、useContext...)](https://blog.csdn.net/u010074572/article/details/105176653)[target="_blank" data-report-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值