react 之 UseMemo

本文主要是介绍react 之 UseMemo，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

useMemo

看个场景

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

// 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发生变化时才重新进行计算

import { useMemo, useState } from 'react'function fib (n) {console.log('计算函数执行了')if (n < 3) return 1return 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

这篇关于react 之 UseMemo的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---