解读reselect

reselect使用文档

为什么使用reselect？

说来话长，一切要从redux说起，redux在每一次dispatch之后都会让注册的回调都执行一遍，然后就是connect函数的锅了，connect实际上就是一个高阶组件，来看看connect的简单实现

    export const connect = (mapStateToProps) => (WrappedComponent) => {
        class Connect extends Component {
            static contextTypes = {
                store: PropTypes.object
            }

            constructor () {
                super()
                this.state = { allProps: {} }
            }

            componentWillMount () {
                const { store } = this.context
                this._updateProps()
                store.subscribe(() => this._updateProps())  // 这里可以发现connect函数返回的这个高阶组件帮我们在redux的store里面注册了一个函数，而这个函数的作用就是获取新的state和props，然后触发一次setState，这就必然会导致这个高阶组件的重新render，如果子组件不是继承自PureComponent或做过其他处理，那么子组件也必然会重新render，即使可能该组件涉及到的state和props都没有发生变化，这样一来就产生了性能问题，其实这个问题还好解决，通过继承PureComponent或者自己在shouldCOmponentUpdate里面做判断即可解决。但是另一个不可避免的性能问题在于mapStateToProps函数的执行，如果前端管理的数据十分复杂，每次dispatch以后所有用到store的组件都要计算mapStateToProps自然就会浪费性能，解决这个问题的方法改造mapStateToProps的入参函数，在入参函数里面缓存一个旧值，然后每次执行mapStateToProps的时候就利用新值和旧值缓存的一个浅比较来判断是否返回原值，如果浅比较相同就直接返回原值，这样就不用再做计算，节省了性能。这样对于性能的提高往往是很大的，因为一次dispatch一般只改变很少的内容。
            }

            _updateProps () {
                const { store } = this.context
                let stateProps = mapStateToProps(store.getState(), this.props) // 额外传入 props，让获取数据更加灵活方便
                this.setState({
                    allProps: { // 整合普通的 props 和从 state 生成的 props
                    ...stateProps,
                    ...this.props
                    }
                })
            }

            render () {
                return 
            }
        }

        return Connect;
    }

于是乎，reselect就出现了，来看看reselect的源码，注释里面写了解读：

    function defaultEqualityCheck(a, b) {
        return a === b
    }

    function areArgumentsShallowlyEqual(equalityCheck, prev, next) {
        if (prev === null || next === null || prev.length !== next.length) {
            return false
        }

        // Do this in a for loop (and not a `forEach` or an `every`) so we can determine equality as fast as possible.
        const length = prev.length
        for (let i = 0; i < length; i++) {
            if (!equalityCheck(prev[i], next[i])) {
                return false
            }
        }

        return true
    }

    export function defaultMemoize(func, equalityCheck = defaultEqualityCheck) {
        let lastArgs = null
        let lastResult = null
        // we reference arguments instead of spreading them for performance reasons
        return function () {
            if (!areArgumentsShallowlyEqual(equalityCheck, lastArgs, arguments)) {
                // apply arguments instead of spreading for performance.
                lastResult = func.apply(null, arguments)  
                // defaultMemoize被调用了两次，一次是执行函数返回一个selector，每次dispatch之后传入selector的参数是state和props，而state总是会发生变化的，所以前面的判断总是会进入到这里
                // 第二次调用时，这里的arguments是dependency函数的运算结果，而前面的判断就是看这些运算结果是否发生了变化，如果依赖项没有发生变化，及直接返回旧值
            }

            lastArgs = arguments
            return lastResult
        }
    }

    function getDependencies(funcs) {
        const dependencies = Array.isArray(funcs[0]) ? funcs[0] : funcs

        if (!dependencies.every(dep => typeof dep === 'function')) {
            const dependencyTypes = dependencies.map(
                dep => typeof dep
            ).join(', ')
            throw new Error(
                'Selector creators expect all input-selectors to be functions, ' +
                `instead received the following types: [${dependencyTypes}]`
            )
        }

        return dependencies
    }

    export function createSelectorCreator(memoize, ...memoizeOptions) {
        // 返回的这个函数就是最后导出的createSelector，memorize是传入的defaultMemorize函数
        // createSelector的入参是dependency函数和一个获取最终数据的函数
        // dependency函数可以放在一个数组里面也可以直接传入
        return (...funcs) => {
            let recomputations = 0
            const resultFunc = funcs.pop()  // pop出来的就是最后获取数据的函数
            const dependencies = getDependencies(funcs)  // 获取dependency数组

            const memoizedResultFunc = memoize(
                function () {
                    recomputations++
                    // apply arguments instead of spreading for performance.
                    return resultFunc.apply(null, arguments)
                },
                ...memoizeOptions
            )

            // If a selector is called with the exact same arguments we don't need to traverse our dependencies again.
            const selector = memoize(function () {
                const params = []
                const length = dependencies.length

                for (let i = 0; i < length; i++) {
                    // apply arguments instead of spreading and mutate a local list of params for performance.
                    params.push(dependencies[i].apply(null, arguments))
                }

                // apply arguments instead of spreading for performance.
                return memoizedResultFunc.apply(null, params) 
                // params数组存放着dependency函数的运算结果，被当做arguments传入memoizedResultFunc，其实每次dispatch之后都会触发dependency函数的重新计算，至于控制性能的问题是在memoizedResultFunc里面实现的
            })

            selector.resultFunc = resultFunc
            selector.dependencies = dependencies
            selector.recomputations = () => recomputations
            selector.resetRecomputations = () => recomputations = 0
            return selector
        }
    }

    export const createSelector = createSelectorCreator(defaultMemoize)
    // 这里export的createSelector函数就是我们所使用的函数

    export function createStructuredSelector(selectors, selectorCreator = createSelector) {
        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}`
            )
        }
        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
                }, {})
            }
        )
    }

总结

1. 关于为什么redux每次dispatch一个action之后总是返回一个新的state？

   • 如果总是修改原来的state，则可能无法触发新的渲染
   • 可以实现回滚

2. reselect的出现就是为了避免一些不必要的mapStateToProps的计算，提升性能