react 之 UseMemo

useMemo


看个场景

下面我们的本来的用意是想基于count的变化计算斐波那契数列之和,但是当我们修改num状态的时候,斐波那契求和函数也会被执行,显然是一种浪费

jsx 复制代码
// useMemo
// 作用:在组件渲染时缓存计算的结果

import { useState } from 'react'

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

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

  const [num, setNum] = useState(0)

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

export default App

useMemo缓存计算结果

思路: 只有count发生变化时才重新进行计算

jsx 复制代码
import { useMemo, useState } from 'react'

function fib (n) {
  console.log('计算函数执行了')
  if (n < 3) return 1
  return fib(n - 2) + fib(n - 1)
}

function App() {
  const [count, setCount] = useState(0)
  // 计算斐波那契之和
  // const sum = fib(count)
  // 通过useMemo缓存计算结果,只有count发生变化时才重新计算
  const sum = useMemo(() => {
    return fib(count)
  }, [count])

  const [num, setNum] = useState(0)

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

export default App
相关推荐
你的电影很有趣11 小时前
lesson77:Vue组件开发指南:从基础使用到高级通信
javascript·vue.js·1024程序员节
Mr.Jessy11 小时前
JavaScript学习第六天:函数
开发语言·前端·javascript·学习·html·1024程序员节
code_YuJun11 小时前
管理系统——应用初始化 Loading 动画
前端
oak隔壁找我11 小时前
JavaScript 模块化演进历程:问题与解决方案。
前端·javascript·架构
Elieal12 小时前
AJAX 知识
前端·ajax·okhttp
sulikey12 小时前
Qt 入门简洁笔记:从框架概念到开发环境搭建
开发语言·前端·c++·qt·前端框架·visual studio·qt框架
烟袅13 小时前
JavaScript 变量声明报错指南:var、let、const 常见错误解析
javascript
烟袅13 小时前
告别 var!深入理解 JavaScript 中 var、let 和 const 的差异与最佳实践
javascript·面试
烛阴13 小时前
循环背后的魔法:Lua 迭代器深度解析
前端·lua
元拓数智13 小时前
现代前端状态管理深度剖析:从单一数据源到分布式状态
前端·1024程序员节