为什么使用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 <WrappedComponent {...this.state.allProps} />
}
}
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
}, {})
}
)
}
总结
-
关于为什么redux每次dispatch一个action之后总是返回一个新的state？
- 如果总是修改原来的state，则可能无法触发新的渲染
- 可以实现回滚
reselect的出现就是为了避免一些不必要的mapStateToProps的计算，提升性能
