react计算属性创建的几种方法 memoize-one缓存

1、计算属性

react中实现类似vue计算属性的方法，用于props与state的计算求值

1、类的get方法设置

可以使用原生的get方法来实现类似计算属性的获取，它用于直接获取props值的计算属性

get getCount(){  //get方式使用计算属性
    return this.props.count*2
}

render() {
    return (
        <p>{this.getCount}</p>
    )
}

2、getDerivedStateFromProps生命周期实现

在新的生命周期钩子中提供了一个能在修改props后在执行这个钩子，通过第一参数获取修改后的props，进行计算后设置state，这个钩子函数设置的state将在本次render中被应用，而shouldComponentUpdate生命周期则会将这个render推入下次的render中，造成多次的渲染

state={
    countChild:0
}


static getDerivedStateFromProps(nextProps,nextState){
    let countChild = nextProps.count*2;  //先进行值的运算，运算完成后对比state状态，如果，不相同进行替换
    if (countChild!==nextState.countChild){
        return {
            countChild  //返回的对象会与state进行合并，并且在这次render进行渲染
        }
    }
    return null  //如果值相同则不更改state
}

这种方式需维护一个状态，并且这个钩子中设置了冗余的判断，所以并不推荐

3、render生命周期实现

render生命周期中使用变量存储可以不需要依靠状态存储

render() {
    let computCount = this.props.count*2;  //将计算放在render函数中来进行渲染
    return (
        <div>
            <p>{computCount}</p>
        </div>
    )
}

这里要是用变量存储不能直接更改更改状态，不然会造成多次渲染，

4、带有缓存的计算属性

在vue中计算属性的作用不只是进行数据的运算，他区别methods的更重要的一点是缓存机制，而在react中进行数据运算的方式虽然很多，但是却没有能够进行缓存的方案，这里可以用第三方模块memoize-one进行数据的缓存

memoize-one缓存的实现

真正计算函数作为参数，返回一个新的函数，新的函数内部会缓存上一次入参以及上一次返回值，如果本次入参与上一次入参相等，则返回上一次返回值，否则，重新调用真正的计算函数，并缓存入参以及结果，供下一次使用。

安装

npm i memoize-one -S

this.createCount = memoizeOne((preCount) => { // 创建构建计算属性的函数
    console.log("计算")
    return preCount*2
})

在render函数中创建一个计算属性

render() {
    let computCount = this.createCount(this.props.count); // 创建计算属性，memoize-one会监听传入参数
    return (
        <div>
            <p>{computCount}</p>  //使用计算属性
        </div>
    )
}

这个计算属性会进行缓存处理，当两次状态的值没有改变不会进行再次计算更新，这样提高了效率

memoize-one的问题

memoize-one具有缓存机制的模块，只要函数中的状态、属性不变，方法不会执行

计算属性对于引用类型还是有问题，我们不应该寄托于让计算属性去判断引用类型里面值更不更改

如果要判断的是引用类型，建议在父组件判定是否进行更新，更新则赋给新值，不更新不执行setState

memoize-one接受两个参数， 第一个参数是要执行的函数，第二个参数(非必填)可以是自定义比较值是否相等的一些方法；