React.memo 和useMemo 的区别

React.memo 和 useMemo 都是 React 中的性能优化工具,但它们的用途和工作原理不同。以下是它们的主要区别:

1. React.memo

React.memo 是一个高阶组件(HOC),用于优化组件的渲染,防止不必要的重新渲染。当组件的 props 没有变化时,React.memo 会阻止组件的重新渲染。

  • 主要用途:

    用于组件级别的性能优化。

    缓存组件的渲染结果,避免因父组件重新渲染而导致不必要的子组件渲染。

    它是一个包裹组件的高阶函数。

  • 工作原理:

    React.memo 会对比当前渲染和之前的 props,如果 props 没有变化,它就跳过重新渲染。如果 props 发生变化,则会重新渲染组件。

  • 使用示例:

bash 复制代码
const MyComponent = React.memo(({ count }: { count: number }) => {
  console.log('Rendering MyComponent');
  return <div>{count}</div>;
});

在父组件的重新渲染时,MyComponent 只有在 count 发生变化时才会重新渲染。

可以传递自定义比较函数:

bash 复制代码
const MyComponent = React.memo(
  ({ count }: { count: number }) => {
    console.log('Rendering MyComponent');
    return <div>{count}</div>;
  },
  (prevProps, nextProps) => prevProps.count === nextProps.count // 自定义比较函数
);

2. useMemo

useMemo 是一个 React Hook,用于在函数组件内部缓存计算结果。它的作用是缓存某个计算值,避免每次渲染时都重新执行计算。

  • 主要用途:

    用于缓存计算值,避免在每次渲染时都执行开销较大的计算。

    useMemo 返回缓存的值,只有在依赖项发生变化时才会重新计算。

  • 工作原理:

    useMemo 会根据传递的依赖数组进行比较。如果依赖项没有变化,useMemo 会返回缓存的结果。如果依赖项发生变化,它就会重新计算结果。

  • 使用示例:

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

const ExpensiveComponent = ({ num }: { num: number }) => {
  const expensiveCalculation = useMemo(() => {
    console.log('Expensive calculation...');
    return num * 2; // 假设这个计算非常耗时
  }, [num]); // 依赖项为 num,只有 num 发生变化时才会重新计算

  return <div>{expensiveCalculation}</div>;
};

在这个例子中,只有当 num 发生变化时,expensiveCalculation 才会重新计算,否则会使用上次计算的缓存值。

3.主要区别总结:

4.何时使用:

使用 React.memo 当你想要优化子组件的渲染性能时,特别是在传递给子组件的 props 没有变化时。

使用 useMemo 当你有一个计算开销大的值,并且这个值的计算依赖于某些特定的 props 或 state 时。

相关推荐
晴殇i1 小时前
前端鉴权新时代:告别 localStorage,拥抱更安全的 JWT 存储方案
前端·javascript·面试
码农刚子1 小时前
ASP.NET Core Blazor简介和快速入门 二(组件基础)
javascript·后端
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 27 - toRef、toRefs、ProxyRef、unref
前端·javascript·vue.js
sjin2 小时前
React源码 - 关键数据结构
前端·react.js
不如喫茶去2 小时前
VUE查询-历史记录功能
前端·javascript·vue.js
一枚前端小能手2 小时前
「周更第8期」实用JS库推荐:decimal.j
前端·javascript
Tech_Lin2 小时前
JavaScript Date时间对象的常用操作方法总结
前端·javascript
IT小哥哥呀3 小时前
论文见解:REACT:在语言模型中协同推理和行动
前端·人工智能·react.js·语言模型
一枚前端小能手3 小时前
🚫 请求取消还在用flag?AbortController让你的异步操作更优雅
前端·javascript
JohnYan3 小时前
工作笔记 - VSCode ssh远程开发
javascript·ssh·visual studio code