reselect源码分析二 ———— createStructuredSelector

2018-12-15

reselect除了上一篇文章介绍的两个常用Api，它还提供了一个Api————createStructuredSelector，这个Api可以将结果直接生产Object的形式，这样可以简化mapStateToProps内的代码，更方便操作。那现在就分析一下它的源码，并看一下实际例子。

createStructuredSelector

/*
    createStructuredSelector接收两个参数
        selectors：即要定义的所有selector的集合
        selectorCreator：要创建selector的方法，默认为createSelector
*/
export function createStructuredSelector(selectors, selectorCreator = createSelector) {
    /*
        先判断传入的selectors是否为object，如果不是会抛错
    */
    if (typeof selectors !== 'object') {
        throw new Error(
            'createStructuredSelector expects first argument to be an object ' +
            `where each property is a selector, instead received a ${typeof selectors}`
        )
    }

    /*
        先获取到selectors中所有的key得到objectKeys
        然后调用selectorCreator也就是createSelector方法，
        遍历objectKeys获取到每个key对应的value，生成新的value数组
        用rest参数的方式传入生成值的函数中，采用数组的reduce方法
        逐步生成每个key对应的处理后的值，最终就可以得到的就是一个Object
    */
    const objectKeys = Object.keys(selectors)
    return selectorCreator(
        objectKeys.map(key => selectors[key]),
        (...values) => {
            return values.reduce((composition, value, index) => {
                composition[objectKeys[index]] = value
                return composition
            }, {})
        }
    )
}

createStructureSelector实例

//selector
const getNum = state => state.num
const getNumA = state => state.numA
const getNumB = state => state.numB
const numSelector = createStructureSelector({
    num: getNum,
    numA: getNumA,
    numB: getNumB
})

//mapStateToProps
const mapStateToProps = state => numSelector(state)

这是createStructureSelector应用比较简单的例子，根据上面的分析，其实就是对每一个key对应的value调用一下createSelector方法，然后再应用数组的reduce方法组合成一个执行完之后的Object返回，以前需要把值都写在mapStateToProps中，现在在createStructureSelector中写就可以，提升性能的同时简化操作。

总结

应用了两篇文章详细分析了reselect的源码，并结合相应的例子做了过程分析，整体看下来，reselect提高性能的方法主要是应用了闭包，将变量保存下来，下次还能再使用，然后再进行比较，以此减少更新时不必要的操作。其核心的方法是defaultMemoize，理解好它是关键，而其它的Api都是createSelectorCreator演变而来的，所以这两个方法是reselect的主要内容。

整体总结

总结一下阅读完reselect之后的收获：

1、灵活运用闭包，在合适的地方应用可以起到很重要的作用，但不可过度使用，闭包保存的变量会常驻内存，如果不能有效的清理，会造成内存泄漏。

2、应用好数组、对象的每个Api方法，如every，reduce，Object.keys，map等等，每一个方法在不同的操作时，都要合理运用，尤其是reduce，在之前分析的源码中，很多地方大量应用了这个方法，最直接的就是compose，它还用很多用法值得去实践。

3、call、apply、bind三个js中非常重要的方法，主要是改变this的执行，而每一个跟另外两个又有区别。

4、在上一次分析redux-actions源码的总结中也说了，数组的部分方法会改变原始数组，如pop、push、shift、unshift等，还要知道调用这些方法后的返回值。

以上大体总结了阅读后的理解，其实还有很多学到的地方，像高阶函数、for循环、arguments等等的。所以，读源码不止能理解框架的原理，还可以读懂设计思想，更可以巩固基础知识。