lodash中memoize和values的用法
lodash模块里的memoize
和values
是一起使用的,作用是缓存状态值。
用法:
安装package:
yarn add lodash
引用
import memoize from 'lodash/memoize';
import _values from 'lodash/values';
然后将memoize
作为函数,_values
作为参数,返回值交给一个自定义变量。这个返回的变量是一个函数,这个新的函数传入的参数就是要缓存的状态值,如果参数是一个对象,缓存的时候就会将对象里边的值变为数组存入。
例子:
var data = {'c':3, 'd':4}
var values = memoize(_values)
const cachenumber = values(data)
console.log(cachenumber)
输出一个数组[3, 4]
当data中的值改变的时候,cachenumber
的值不会改变,除非重新调用values
给cachenumber
赋值。
举个例子:
import React, { useState } from 'react';
import memoize from 'lodash/memoize'
import _values from 'lodash/values'
var data = {'c':3, 'd':4}
var values = memoize(_values)
const cachenumber = values(data)
const Test2 = () => {
var [other, setother] = useState(data)
const click = () => {
setother({
c: other.c + 1,
d: other.d
})
console.log(cachenumber)
}
return (
<div id="test">
<button onClick={click}>button</button>
<p>{other.c}</p>
</div>
);
}
export default Test2;
这段代码执行的时候,每点击一次按钮,p标签
里边的值会加一,但是在后台console出来的值不变。
注意:
如果将memoize
部分写在Test2
组件内部,每进行一次点击,Test2
组件里边的代码就会重新执行一次,也就是说cachenumber
会被重新赋值一次,这样,后台console出来的值也会随着点击加一。