lodash中memoize和values的用法

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出来的值也会随着点击加一。