react——memoize-one性能优化方案—— memoization(计算属性/记忆组件)

Posted 2022-09-23 勇敢*牛牛

import memizeOne from 'memoize-one'

• 用于计算所用，在类组件中，需要安装，在函数组件中它内置
• 此方法是一个性能优化的方案，可以不用，但是如果有计算且多次调用，则建议使用

memoization(计算属性/记忆组件)

连续两次相同传参，第二次会直接返回上次的结果，每次传参不一样，就直接调用函数返回新的结果，会丢失之前的记录，并不是完全记忆，可以在它的参数中传入state数据从而实现了类似Vue中的计算属性功能

# 安装
npm i -S memoize-one

# 引入
import memoizeOne from 'memoize-one'

# 使用
getValue = memoizeOne((x,y) => x+y)

# 调用
render()
let total = this.getValue(this.state.x, this.state.y)
return <div>total</div>

例如：

n1和n2参数就是它的依赖项，只要它的依赖项没有变化，则第2次后调用都为缓存中读取

import React,  Component  from 'react';
import memizeOne from 'memoize-one'
class Computer extends Component 
    state=
        n1: 1,
        n2: 2
    
    sum = memizeOne((n1,n2)=>n1+n2)
    sum = memizeOne((n1,n2)=>
        return n1+n2
    )

    render() 
        let  n1, n2  = this.state
        return (
            <div>
                <h3>this.sum(n1, n2)</h3>
                <h3>this.sum(n1, n2)</h3>
            </div>
        );
    


export default Computer;