useMemo:根据名字翻译为"备忘录",他在react的hooks中发挥什么样的作用呢?
先根据查找到的资料,发现它的用法同useEffect很像,也是接受第二个参数作为判断是否执行useMemo的依赖项。
其实它是解决这样的一个场景中的问题,先看代码:
import { useState, useMemo} from "react";
import * as ReactDOM from "react-dom";
// 产品名称列表
const nameList = ['apple', 'peer', 'banana', 'lemon']
function App() {
// 产品名称、价格
const [price, setPrice] = useState(0)
const [name, setName] = useState('apple')
// 假设有一个业务函数 获取产品的名字
function getProductName() {
console.log('getProductName触发')
return name
}
return (
<>
<p>{price}</p>
<p>{getProductName()}</p>
<button onClick={() => setPrice(price+1)}>价钱+1</button>
<button onClick={() => setName(nameList[Math.random() * nameList.length << 0])}>修改名字</button>
</>
)
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
微信截图_20211207172607.png
在这个示例中,getProductName算作是一个子组件,从内部可以看到它只是使用到了name,因此可以认为它只需要在name发生变更的时候执行,其他的状态和它无关。特别的,如果getProductName中是一个开销非常大的计算,那么其他状态的变更不应该触发它,否则就是一种浪费。
那么这个问题该如何解决呢?似乎好像一下子想到了useEffect,它可以以第二个数组参数作为依赖,只在依赖项发生变更的时候才执行。但是突然又想到,useEffect的使用语法似乎并不适合这里的getProductName函数,因为useEffect内部如果将getProductName返回,尚不清楚返回的还是不是getProductName函数本身,带着这个问题,我们测试看看useEffect方法返回的是什么东西。
const test = useEffect(()=>{
function getProductName() {
console.log('getProductName触发')
return name
}
return getProductName
}, [name])
console.log(test)
image.png
可以看到,将useEffect赋给一个变量且内部返回一个函数,但useEffect函数并不返回任何数据(test是undefined)。因此,使用useEffect的想法失败。
这个时候让咱们来尝试useMemo吧!
import { useState, useMemo, useEffect} from "react";
import * as ReactDOM from "react-dom";
// 产品名称列表
const nameList = ['apple', 'peer', 'banana', 'lemon']
function App() {
// 产品名称、价格
const [price, setPrice] = useState(0)
const [name, setName] = useState('apple')
// 假设有一个业务函数 获取产品的名字
const memo_getProductName = useMemo(()=>{
console.log('getProductName触发')
return name
}, [name])
console.log(memo_getProductName)
return (
<>
<p>{price}</p>
<p>{memo_getProductName}</p>
<button onClick={() => setPrice(price+1)}>价钱+1</button>
<button onClick={() => setName(nameList[Math.random() * nameList.length << 0])}>修改名字</button>
</>
)
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
image.png
可以看到useMemo生效了,当我点击价格按钮,只是价格变动,memo_getProductName内部并没有执行。
同时发现初始进入页面的时候useMemo也是会执行一次的,这和useEffect保持了一致,也就是相当于在componentDidMount的生命周期会执行。
由此可得出这个结论:useMemo 返回一个 memoized 值,在依赖参数不变的的情况返回的是上次第一次计算的值,当依赖参数发生变化时useMemo就会自动重新计算返回一个新的 memoized值。
用自己的理解就是:useMemo基本上同useEffect起到一样的作用,只根据依赖项数组中的状态是否发生变更来判断自己是否需要执行,只是useMemo的执行可返回一个具体的结果供其他地方使用。
当然,useMemo并不一定需要在内部返回一个什么,也可以是纯粹的在useMemo中写一些逻辑。以下是antd-design中upload组件有一段使用到了useMemo的代码。
// Control mode will auto fill file uid if not provided
React.useMemo(() => {
const timestamp = Date.now();
(fileList || []).forEach((file, index) => {
if (!file.uid && !Object.isFrozen(file)) {
file.uid = `__AUTO__${timestamp}_${index}__`;
}
});
}, [fileList]);
只要fileList发生变更,useMemo内部就会执行,useMemo并不需要将自己赋给谁去调用,这个时候和useEffect是完全一样的作用。
与useEffect?
如上所述useMemo与useEffect的区别好像并不大,那我是否可以随意混用?带着这个问题,且看官网的一段描述:
记住,传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作,诸如副作用这类的操作属于 useEffect 的适用范畴,而不是 useMemo。
你可以把 useMemo 作为性能优化的手段,但不要把它当成语义上的保证。将来,React 可能会选择“遗忘”以前的一些 memoized 值,并在下次渲染时重新计算它们,比如为离屏组件释放内存。先编写在没有 useMemo 的情况下也可以执行的代码 —— 之后再在你的代码中添加 useMemo,以达到优化性能的目的。
这说的什么意思?意思是大多数时候其实并不需要使用到useMemo,除非真的需要做性能优化才考虑到它。
那么说的“会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作”该如何理解?来写个例子看看。
import { useState, useMemo, useEffect } from "react";
import * as ReactDOM from "react-dom";
// 产品名称列表
const nameList = ["apple", "peer", "banana", "lemon"];
function App() {
// 产品名称、价格
const [price, setPrice] = useState(0);
const [name, setName] = useState("apple");
// 假设有一个业务函数 获取产品的名字
useMemo(() => {
setName(nameList[(Math.random() * nameList.length) << 0])
});
return (
<>
<p>{price}</p>
<p>{name}</p>
<button onClick={() => setPrice(price + 1)}>价钱+1</button>
</>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
image.png
我在useMemo中使用尝试使用setState改变一个状态的值,但编辑器自动提示陷入死循环,也就是说,useMemo会在组件渲染的时刻执行,因为初始进入页面useMemo会执行一次,所以name就会被变更,随着name的变更,页面重新渲染,useMemo在这次渲染中又执行,name又被变更...这样就陷入了死循环。
但是当我在依赖数组中加入price的时候就不会陷入死循环:
// 假设有一个业务函数 获取产品的名字
useMemo(() => {
setName(nameList[(Math.random() * nameList.length) << 0])
}, [price]);
原因是,在这里的useMemo中只是触发name的变更,加上了price的依赖后排除了name引起的useMemo执行。但这么写其实并没有什么意义,不如直接使用useEffect更直接(当然,useEffect如果在不设依赖项的情况下也不应该setState,否则也会陷入死循环)。
因此还是官网推荐的:除非非有必要使用useMemo来做性能优化才去选择它。
我自己感觉useMemo有点像vue中的computed。
完。
网友评论