React-useMemo

已于 2024-06-09 14:15:10 修改
阅读量879 收藏 19
点赞数 10
分类专栏： React-Hook 文章标签： react.js javascript 前端
于 2024-06-09 14:14:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35260673/article/details/139561618
版权

useMemo

useMemo 是一个 React Hook，它在每次重新渲染的时候能够缓存计算的结果。

使用方式为

const cachedValue = useMemo(calculateValue, dependencies)

传入的参数第一个是对依赖值进行计算的函数。该函数没有任何参数，并且返回值是 useMemo 的缓存值 cachedValue 。

第二个参数是依赖值数组，里面存入的是在组件中，并且在函数calculateValue计算需要用到的React响应式变量。React 使用 Object.is 将每个依赖项与其之前的值进行比较。

useMemo 的返回值就是依赖项 dependencies 经过函数 calculateValue 计算的值。在初次渲染中，cachedValue 就是函数 calculateValue 计算的值。在接下来的渲染中，如果依赖项 dependencies 没有变化，cachedValue 就是上次缓存的值；如果依赖项 dependencies 发生变化，cachedValue 就会经过 calculateValue 重新计算得到。

注意事项：

  • useMemo 是一个 React Hook，所以你只能 在组件的顶层 或者自定义 Hook 中调用它。不能在循环语句或条件语句中调用它。

组件中的使用方式

import { useState, useMemo } from "react"

function factorialOf(n) {
  console.log('斐波那契函数执行了')
  return n <= 0 ? 1 : n * factorialOf(n - 1)
}

export default function UseMemoDemo () {
  const [count, setCount] = useState(0)

  // 用 useMemo 
  const sumByCount = useMemo(() => factorialOf(count), [count])

}

缓存计算值

import { useState, useMemo } from "react"

function factorialOf(n) {
  console.log('斐波那契函数执行了')
  return n <= 0 ? 1 : n * factorialOf(n - 1)
}

export default function UseMemoDemo () {
  const [count, setCount] = useState(0)
  // 计算斐波那契之和
  const sumByCount = factorialOf(count)

  const [num, setNum] = useState(0)

  return (
    <>
      <div>{sumByCount}</div>
      <div>
        <button onClick={() => setCount(count + 1)}>+count:{count}</button>
        <button onClick={() => setNum(num + 1)}>+num:{num}</button>
      </div>
    </>
  )
}

当触发setCount或setNum的时候，就会重新渲染，从而会重新执行 sumByCount 的计算。但是 sumByCount 只依赖于 count 。当触发 SetNum 的时候，sumByCount 就做了一次无效计算。这时候可以用 useMemo 将 sumByCount 的值缓存起来，当依赖项 count 发生变化的时候，再重新计算 sumByCount 的值。当 count 的值与上次渲染时相同，那么就可以重用之前计算过的 sumByCount 。

import { useState, useMemo } from "react"

function factorialOf(n) {
  console.log('斐波那契函数执行了')
  return n <= 0 ? 1 : n * factorialOf(n - 1)
}

export default function UseMemoDemo () {
  const [count, setCount] = useState(0)
  // 计算斐波那契之和
  // const sumByCount = factorialOf(count)

  // 用 useMemo 
  const sumByCount = useMemo(() => factorialOf(count), [count])

  const [num, setNum] = useState(0)

  return (
    <>
      <div>{sumByCount}</div>
      <div>
        <button onClick={() => setCount(count + 1)}>+count:{count}</button>
        <button onClick={() => setNum(num + 1)}>+num:{num}</button>
      </div>
    </>
  )
}

记忆另一个Hook的依赖项

import { useState, useMemo } from "react"

function factorialOf(n) {
  console.log('斐波那契函数执行了')
  return n <= 0 ? 1 : n * factorialOf(n - 1)
}

export default function UseMemoDemo () {
    ...
    
  // 记录另一个Hook的依赖
  const searchItem = [
    {label: 'apple', key: 'apple'},
    {label: 'banana', key: 'banana'},
    {label: 'orange', key: 'orange'},
  ]

  const chosenItem = useMemo(() => {
    console.log('计算chosenItem')
    return searchItem[0].key
  }, [searchItem])

  return (
    <>
      <div>{sumByCount}</div>
      <div>
        <button onClick={() => setCount(count + 1)}>+count:{count}</button>
        <button onClick={() => setNum(num + 1)}>+num:{num}</button>
      </div>
      <div>
        key: {chosenItem}
      </div>
    </>
  )
}

现在 chosenItem 依赖于 searchItem 。但是React每次渲染就像一张快照，也就是说每次渲染函数执行的时候，函数都会拥有独立的state和props，函数内部的变量也是独立。所以每次渲染中 searchItem 的引用都是不同的。那么，在每次渲染中，useMemo都会判断 searchItem 发生了变化，从而重新执行 chosenItem 的计算。

在这里插入图片描述

为了避免无效的重新计算，可以将 searchItem 缓存起来，也可以通过 useRef 保存。不过当 searchItem 会依赖于组件中的props时候，建议采取 useMemo 进行缓存。

import { useState, useMemo } from "react"

function factorialOf(n) {
  console.log('斐波那契函数执行了')
  return n <= 0 ? 1 : n * factorialOf(n - 1)
}

export default function UseMemoDemo () {
	...

  // 记录另一个Hook的依赖
  // const searchItem = [
  //   {label: 'apple', key: 'apple'},
  //   {label: 'banana', key: 'banana'},
  //   {label: 'orange', key: 'orange'},
  // ]

  const searchItem = useMemo(() => {
    return [
      {label: 'apple', key: 'apple'},
      {label: 'banana', key: 'banana'},
      {label: 'orange', key: 'orange'},
    ]
  }, [])

  const chosenItem = useMemo(() => {
    console.log('计算chosenItem')
    return searchItem[0].key
  }, [searchItem])

  return (
    <>
      <div>{sumByCount}</div>
      <div>
        <button onClick={() => setCount(count + 1)}>+count:{count}</button>
        <button onClick={() => setNum(num + 1)}>+num:{num}</button>
      </div>
      <div>
        key: {chosenItem}
      </div>
    </>
  )
}

在这里插入图片描述

避免组件的重新渲染

import { useState, useMemo } from "react"
import List from "./components/List"

function factorialOf(n) {
  console.log('斐波那契函数执行了')
  return n <= 0 ? 1 : n * factorialOf(n - 1)
}

export default function UseMemoDemo () {
  // useMemo缓存计算值
  const [count, setCount] = useState(0)
  // 计算斐波那契之和
  // const sumByCount = factorialOf(count)

  // 用 useMemo 
  const sumByCount = useMemo(() => factorialOf(count), [count])

  const [num, setNum] = useState(0)

  // 记录另一个Hook的依赖
  // const searchItem = [
  //   {label: 'apple', key: 'apple'},
  //   {label: 'banana', key: 'banana'},
  //   {label: 'orange', key: 'orange'},
  // ]

  const searchItem = useMemo(() => {
    return [
      {label: 'apple', key: 'apple'},
      {label: 'banana', key: 'banana'},
      {label: 'orange', key: 'orange'},
    ]
  }, [])

  const chosenItem = useMemo(() => {
    console.log('计算chosenItem')
    return searchItem[0].key
  }, [searchItem])

  // 避免重新渲染

  return (
    <>
      <div>{sumByCount}</div>
      <div>
        <button onClick={() => setCount(count + 1)}>+count:{count}</button>
        <button onClick={() => setNum(num + 1)}>+num:{num}</button>
      </div>
      <div>
        key: {chosenItem}
      </div>
      {/* 避免重新渲染 */}
      <div>
        <List searchList={searchItem}></List>
      </div>
    </>
  )
}

// List.jsx
export default function List ({ searchList}) {
  console.log('List组件渲染了')
  return (
    <ul>
      {searchList.map(item => {
        return <li key={item.key}>{item.label}</li>
      })}
    </ul>
  )
}

在这里插入图片描述

现在 searchItem 作为props传递给子组件List。但是当我们触发 setCount 或 setNum 的时候，父组件重新渲染，子组件 List 也会跟着重新渲染。这是因为默认情况下，当一个组件重新渲染时，React 会递归地重新渲染它的所有子组件。当我们不希望子组件 List 在props不变的情况下跟着重新渲染，可以将子组件 List 包装在 memo 中，这样当它的 props 跟上一次渲染相同的时候它就会跳过本次渲染：

import { memo } from 'react'

const List =  memo(function List ({ searchList}) {
  console.log('List组件渲染了')
  return (
    <ul>
      {searchList.map(item => {
        return <li key={item.key}>{item.label}</li>
      })}
    </ul>
  )
})

export default List

在这里插入图片描述

总结

  • useMemo 可以将依赖项经过一些计算得到的值缓存起来，直到依赖项发生变化的时候才需要重新计算；
  • useMemo 类似于vue中的计算属性 computed ；
  • 用useMemo缓存的值需要传给子组件的时候，可以对子组件用 memo 包装，从而避免子组件的重新渲染；
在前端苟着的e仔
关注
  • 10
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
react-useMemo
05-22
Create React App入门该项目是通过引导的。可用脚本在项目目录中，可以运行：yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误...
react-select-country-list:这是react-select的国家_地区列表数据格式
05-25
import React , { useState , useMemo } from 'react' import Select from 'react-select' import countryList from 'react-select-country-list' function CountrySelector ( ) { const [ value , setValue ] = ...
React--useMemo
weixin_45269534的博客
06-27 3292
React--useMemo
react 之 UseMemo
最新发布
Jasmin博客
02-01 609
但是当我们修改num状态的时候，斐波那契求和函数也会被执行，显然是一种浪费。思路: 只有count发生变化时才重新进行计算。下面我们的本来的用意是想。
react usememo_看看React useMemo Hook
08-17 360
react usememoYou may have seen, released along with React Hooks, a strange hook called useMemo. What could this strange, ????alien???? hook mean and what is it used for? Most importantly, how can it help yo...
React之Hook----useMemo
weixin_54498425的博客
06-25 471
1、“
react中使用useMemo和useCallback
热门推荐
陈开心的博客
01-16 1万+
之前学到的memo是用来优化函数组件的重渲染问题，当传入的属性值都没变化时就不会触发组件的重渲染，否则组件就会重渲染。和类组件中的PureComponent组件是类似。 useMemo功能是判断组件中的函数逻辑是否重新执行，用来优化性能。 import React, { useState, useMemo } from 'react'; // , PureComponent, memo, useS...
react-demos:react 从 0 到 0.1
05-22
react-demos clone git clone ...demo19: 函数组件中方法以及变量的缓存方案 useCallback、useMemo react-context Context 各种 API 的使用 react-create-demo React createElement
react-easy-contexts:一个轻松添加多个 React 上下文的简单工具
08-03
添加yarn add react-easy-contexts# ornpm i react-easy-contexts采用 // App.jsximport { useState , useMemo } from 'react' ;import create from 'react-easy-contexts' ;import Main from './Main' ;export ...
react-Haunted针对Web组件实现的ReactHooksAPI
08-15
这些Hooks包括`useContext`, `useState`, `useReducer`, `useEffect`, `useCallback`, `useMemo`等，与React原生Hooks类似，但实现方式不同，更注重简洁性和性能。 2. **单向数据流**: Haunted强调组件的状态管理...
React Hooks系列之useMemo
Boboy
03-19 1万+
前言 react hooks 是 React 16.8 的新增特性。 它可以让我们在函数组件中使用 state 、生命周期以及其他 react特性，而不仅限于 class 组件。react hooks 的出现，标示着 react中不会在存在无状态组件了，只有类组件和函数组件。具体可查看官网。 优势： 函数组件不能使用state，遇到交互更改状态等复杂逻辑时不能更好地支持，hooks让函数组件更...
react useMemo和useCallback（个人笔记，非教程）
qq_44408123的博客
10-09 355
useMemo useMemo在渲染前执行 let a = 1; let double = useMemo( () => { return a * 2 },[a] ) // 只有当a的值从新改变时，才会重新计算double的值（执行本代码块）， useCallback useCallback可以理解为useMemo的一种语法糖， const memoizedCallback = use...
React Hooks之useMemo
努力学习前端的阿猪
12-28 3267
学习目标： useMemo 学习内容： useMemo 学习产出： useMemo 为了进行性能优化，React提供了useMemo 和 useCallback。其中useMemo 用来保持一个对象引用不变。 React-useMemo中给出了使用useMemo的介绍：它返回一个memoized 值，且仅会在某个依赖项改变时才重新计算memoized值。如果没有提供依赖项数组，则它在每次渲染时都会计算新的值。 const memoizedValue = useMemo(() => computeE
React中useMemo的简单使用
u010234868的专栏
09-20 9992
useMemo使用场景，比如有两个变量（依赖项），只需要在其中一个变量变化时发生变化，否则拿缓存的值；或者其中另一个变量的变化不需要引起重新计算时使用。该属性类似于vue中的计算属性，有返回值。useMemo(fn, arr)第一个参数为函数。第二个参数为依赖项，并且其值发生改变，才会多次执行执行，否则只执行一次，如果为空数组[]，fn只执行一次。useMemo主要用来解决使用React hooks产生的无用渲染的性能问题，用来做缓存用。
react hook之useMemo
qq_44436257的博客
02-08 1748
useMemo是用来缓存计算属性的，它会在发现依赖未发生改变的情况下返回旧的计算属性值的地址。 useMemo绝不是用的越多越好，缓存这项技术本身也需要成本。 useMemo的使用场景之一是:只需要给拥有巨大计算量的计算属性缓存即可。 useMemo的另一个使用场景是：当有计算属性被传入子组件，并且子组件使用了react.memo进行了缓存的时候,为了避免子组件不必要的渲染时使用
详解React.memo、useMemo、useCallback
程序员界科比的博客
04-10 915
1：前言 最近开发中使用到了这几个API，这几个API不经常用，刚看到的时候理解也有点模糊，于是网上找了一些讲解并自己动手做了些实验，算是搞明白了。本文主要讲解React.memo、useMemo、useCallback的知识。 2：React.memo React.memo为高阶组件。 如果你的组件在相同 props 的情况下渲染相同的结果，那么你可以通过将其包装在 React.memo中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下，React 将跳过渲染..
React中useMemo函数【调优的不二选则】的使用及一看就会的案例（个人觉得很详细了，而且包含了很多知识点呀）
qq_45838712的博客
09-04 706
react中对useMemo函数的个人理解，以小白编程面向小白编程，希望对大家有用。
六分钟带你学会 react 中的 useMemo
JackChan
01-04 2777
六分钟带你学会 react 中的 useMemo
react-native useMemo
09-12
React Native's `useMemo` hook is a hook that allows you to memoize the value of a function or an object, preventing unnecessary re-computation of that value on subsequent renders. Here's an example ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值