本文针对React+Redux实例中的shouldComponentUpdate函数做一个理解,
shouldComponentUpdate(nextProps) { return nextProps.state != this.props.state; }
如果state是一个对象,使用这种表示也是正确的,我们从reducer开始理解。
// apple basket reducer export default (state = { isPicking: false,newAppleId: 1,apples: [ { id: 0,weight: 235,isEaten: false } ] },action) => { let newState ; switch (action.type) { case 'apple/BEGIN_PICK_APPLE': newState = Object.assign({},state,{ isPicking: true }); return newState; case 'apple/DONE_PICK_APPLE': newState = Object.assign({},{ apples: [ ...state.apples,{ id: state.newAppleId,weight: action.payload,isEaten: false } ],newAppleId: state.newAppleId + 1,isPicking: false }) return newState; case 'apple/FAIL_PICK_APPLE': //这里只是简单处理 newState = Object.assign({},{ isPicking: false }); return newState; case 'apple/EAT_APPLE': newState = Object.assign({},{ apples: [ ...state.apples.slice(0,action.payload),Object.assign({},state.apples[action.payload],{ isEaten: true }),...state.apples.slice(action.payload + 1) ] }) return newState; default: return state; } };
从上面代码可以看出,reducer
中state
如果没有匹配到action
,state
是没有更新的,也就是说在shouldComponentUpdate
函数中,nextProps.state
是没有更新的,即nextProps.state != this.props.state
返回false
,shouldComponentUpdate
函数也就不更新了。
如果有一个action
匹配了,那么返回的newState与原来的state就不同了,导致了shouldComponentUpdate
函数的更新。